Расширенное использование свойств CSS3 RGBA

Автор：Eve Cole Время обновления：2010-03-10 16:01:31

Давайте поговорим о расширенном использовании атрибутов RGBA, которые в настоящее время широко используются в CSS3. Проблема совместимости этого атрибута относительно проста. IE8 уже поддерживает этот атрибут, а IE6 и IE7 также могут поддерживать его посредством хаков. RGBA аналогичен атрибуту RBG в CSS2, за исключением того, что атрибут RGBA имеет дополнительное определение прозрачности. Объяснение атрибута RGBA в стандарте CSS3 следующее:

/*Основной синтаксис*/
em { цвет : Rgba ( красный , зеленый , синий , непрозрачность ) }
/* Пример*/
em { color : rgba ( 255 , 0 , 0 , 1 ) } /* красный, непрозрачный */
em { color : rgba ( 100 % , 0 % , 0 % , 1 ) } /* То же, что и выше*/

На самом деле использование трех десятичных значений от 1 до 255 для определения цвета является более точным, чем использование процентов. Ниже приведены значения RGB нескольких цветов. При его использовании вам нужно только преобразовать шестнадцатеричные значения. Подойдет от 00 до FF в десятичном формате.

Как использовать атрибуты RGBA

Преимущество RGBA в том, что можно представить больше цветов за счет определения прозрачности и смешивания цветов в разных слоях, точно так же, как смешивание красок. Например, мы сначала устанавливаем фоновое изображение для страницы, а затем устанавливаем цвет для содержимого в H1 страницы, например:

ч1 {
цвет : RGB ( 0 , 0 , 0 ) ;
цвет фона : RGB ( 255 , 255 , 255 ) ;
}

Эффект следующий:

Здесь вы можете видеть, что H1 не имеет эффекта прозрачности.

Но каков будет эффект, если я не установлю общую прозрачность (атрибут непрозрачности) для H1?

ч1 {
цвет : RGB ( 0 , 0 , 0 ) ;
цвет фона : RGB ( 255 , 255 , 255 ) ;
непрозрачность : 0,5 ;
}

Эффект, который мы видим здесь, заключается в том, что весь H1, включая текст, становится прозрачным на 50%. Однако прозрачность текста влияет на чтение. Давайте попробуем использовать атрибут RGBA, чтобы установить цвет фона H1 отдельно.

ч1 {
цвет : RGB ( 0 , 0 , 0 ) ;
цвет фона : rgba ( 255 , 255 , 255 , 0.5 ) ;
}

Здесь мы видим, что фон H1 на 50% прозрачно-белый, но текст внутри по-прежнему непрозрачно-черный. Конечно, вы также можете сделать прозрачным только текст в H1.

ч1 {
цвет : rgba ( 0 , 0 , 0 , 0,5 ) ;
цвет фона : RGB ( 255 , 255 , 255 ) ;
}

Если сделать прозрачным только текст, можно создать эффект вырезания из бумаги. Дополнительное использование

RGBA можно использовать везде, где необходимо установить цвет, например:

div {
цвет : RGB ( 0 , 0 , 0 ) ;
цвет фона : RGB ( 255 , 255 , 255 ) ;
граница : 10 пикселей, сплошная RGBA ( 255 , 255 , 255 , 0,3 ) ;
}

Установите прозрачность на 30% и сплошную белую рамку с шириной линии 10 пикселей для всех элементов div.

дел {
цвет : rgba ( 255 , 255 , 255 , 0,8 ) ;
цвет фона : rgba ( 142 , 213 , 87 , 0.3 ) ;
}
div :hover {
цвет : rgba ( 255 , 255 , 255 , 1 ) ;
цвет фона : rgba ( 142 , 213 , 87 , 0.6 ) ;
}

Наведите курсор мыши, чтобы изменить прозрачность.

Кроме того, в сочетании с JavaScript атрибуты RGBA могут создавать более потрясающие эффекты.

Измените свои привычки написания CSS.

В приведенных выше примерах вы можете видеть, что автор использовал rgb() для указания цветов вместо традиционной формы шестнадцатеричного представления #xxx. Это метод записи, подготовленный для атрибута RGBA CSS3. Использование rgb() для указания цвета можно понимать как непрозрачность rgba(), но разница между ними очень мала, что значительно упростит переход на rgba. () в будущем.

Совместимость со всеми браузерами.

Хотя последние версии основных браузеров уже поддерживают атрибуты RGBA, мы также должны позаботиться о пользователях, которые используют старые браузеры, поэтому в некоторых местах нам будет безопаснее использовать старый метод. Существует несколько методов, и каждый может выбрать в соответствии со своими потребностями.

1. Более ранние версии не используют атрибут RGBA.

Хотя это повлияет на результат в браузерах более ранних версий, это самый простой и безопасный метод. Конкретные операции следующие:

h1 {.
цвет : RGB ( 127 , 127 , 127 ) ;
цвет : rgba ( 0 , 0 , 0 , 0,5 ) ;
}

Сначала установите цвет rgb, а затем цвет rgba, чтобы браузеры, не поддерживающие атрибут rgba, отображали только цвет rgb, а браузеры, поддерживающие rgba, отображали цвет rgba из-за переопределения.

2. Используйте прозрачное изображение PNG в качестве фона.

Преимущество формата PNG заключается в том, что функция прозрачности изображения может отображаться на веб-странице.

ч1 {
фон : прозрачный URL ( black50.png ) ;
фон : rgba ( 0 , 0 , 0 , 0,5 ) нет ;
}

Тот же эффект, что и в rgba, достигается за счет фона PNG с прозрачностью 50%.

3. Взлом IE

может использовать частные атрибуты IE для решения проблем IE6 и IE7, что может достичь тех же эффектов, что и rgba.

ч1 {
фильтр : progid : DXImageTransform . Microsoft . Gradient ( GradientType = 1 , StartColorStr = '#80000000' , EndColorStr = '#80000000' ) ;
}

Нам нужно обратить внимание на значение StartColorStr и EndColorStr. Первые две цифры — это шестнадцатеричная прозрачность, а последние шесть цифр — шестнадцатеричный цвет.

Исходная ссылка: Расширенное использование атрибутов CSS3 RGBA.

Спасибо bolo за его вклад.