CSS: прозрачность элементов
В этой главе:
-
Создание прозрачного изображения
-
Прозрачность и псевдокласс :hover
-
Прозрачность элемента
Создание прозрачного изображения
Для создания эффекта прозрачности в CSS используется свойство opacity.
Браузер IE8 и более ранние его версии поддерживают альтернативное свойство -filter:alpha(opacity=x), где 'x' может принимать значение от 0 до 100, чем меньше значение, тем прозрачнее будет элемент.
Все остальные браузеры поддерживают стандартное свойство: opacity, которое может принимать в качестве значения числа от 0.0 до 1.0, чем меньше значение, тем прозрачнее будет элемент:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html> <html> <head> <meta charset= "utf-8" > <title>Название документа</title> <style> .myClass { float : left ; margin-right : 5px ; opacity: 0.4 ; filter: alpha(opacity= 40 ); /*для IE8 и более ранних версий*/ } </style> </head> <body> <img src= "klematis.jpg" class= "myClass" > <img src= "klematis.jpg" > </body> </html> |
Прозрачность и псевдокласс :hover
Псевдокласс :hover позволяет изменять внешний вид элементов при наведении на них курсора мыши. Мы воспользуемся этой возможностью, чтобы изображение при наведении мыши теряло свою прозрачность:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html> <html> <head> <meta charset= "utf-8" > <title>Название документа</title> <style> img { float : left ; margin-right : 5px ; opacity: 0.4 ; filter: alpha(opacity= 40 ); /*для IE8 и более ранних версий*/ } img:hover { opacity: 1.0 ; filter: alpha(opacity= 100 ); } </style> </head> <body> <img src= "klematis.jpg" > <img src= "klematis2.jpg" > </body> </html> |
Прозрачность элемента
Есть два возможных способа сделать элемент прозрачным: свойство opacity, описанное выше, и указание цвета фона в RGBA формате.
Возможно вы уже знакомы с моделью представления цвета в формате RGB. RGB (Red, Green, Blue - красный, зеленый, синий) - цветовая система, определяющая оттенок путем смешивания красного, зеленого и синего цветов. Например, для задания желтого цвета для текста можно воспользоваться любым из следующих объявлений:
1
2
|
color : rgb ( 255 , 255 , 0 ); color : rgb ( 100% , 100% , 0 ); |
Цвета, заданные с помощью RGB, будут отличаться от шестнадцатеричных значений, используемых нами до этого тем, что позволяют использовать альфа-канал прозрачности. Это значит, что сквозь фон элемента с альфа-прозрачностью будет видно то, что располагается под ним.
Объявление цвета RGBA схоже по синтаксису со стандартными правилами RGB. Однако, кроме всего прочего, нам потребуется объявить значение как RGBA (вместо RGB) и задать дополнительное десятичное значение прозрачности после значения цвета в промежутке от 0.0 (полная прозрачность) до 1 (полная непрозрачность).
1
2
|
color : rgba( 255 , 255 , 0 , 0.5 ); color : rgba( 100% , 100% , 0 , 0.5 ); |
Разница между свойством opacity и RGBA заключается в том, что свойство opacity применяет прозрачность ко всему элементу целиком, то есть все содержимое элемента становится прозрачным. А RGBA позволяет задать прозрачность отдельным частям элемента (например, только тексту или фону):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
body { background-image : url (img.jpg); } .prim 1 { width : 400px ; margin : 30px 50px ; background-color : #ffffff ; border : 1px solid black ; font-weight : bold ; opacity: 0.5 ; filter: alpha(opacity= 70 ); /*для IE8 и более ранних версий*/ text-align : center ; } .prim 2 { width : 400px ; margin : 30px 50px ; background-color : rgba( 255 , 255 , 255 , 0.5 ); border : 1px solid black ; font-weight : bold ; text-align : center ; } |
Примечание: значения RGBA не поддерживаются в браузере IE8 и более ранних версиях. Для объявления резервного варианта цвета для старых браузеров, не поддерживающих значения цветов с альфа-каналами, следует указать его первым до значения RGBA:
1 2 |
background : rgb ( 255 , 255 , 0 ); background : rgba( 255 , 255 , 0 , 0.5 ); |