Свойство CSS 3 opacity позволяет делать прозрачным тот или иной элемент сайта.
Степень прозрачности элемента определяется значением от 0 до 1 где 0 – полностью прозрачный а 1 – непрозрачный вовсе.. Так например значение 0.5 свойства opacity применённого к картинке будет значить что данное изображение должно быть полупрозрачным.
Пример CSS3:
.opacity1 {opacity: 0;} /* Полная прозрачность */
.opacity2 {opacity: 0.05;} /* Почти совсем совсем прозрачный */
.opacity3 {opacity: .3;} /* Можно и так писать без нуля вначале */
.opacity4 {opacity: 0.5;} /* Полупрозрачный */
.opacity5 {opacity: 0.874;} /* Можно задавать очень точную степень прозрачности */
.opacity6 {opacity: 1;} /* Совсем не прозрачный */
Пример HTML:
<head>
<title>My CSS3</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<img src="/CSS3.png" class="opacity1" alt="Полностью прозрачный рисунок">
<img src="/CSS3.png" class="opacity2" alt="Почти совсем прозрачный 0.05">
<img src="/CSS3.png" class="opacity3" alt="Прозрачность рисунка .3 да, ноль писать вовсе не обязательно">
<img src="/CSS3.png" class="opacity4" alt="Полупрозрачный рисунок">
<img src="/CSS3.png" class="opacity5" alt="Прозрачность рисунка может быть заданна очень точно 0.874">
<img src="/CSS3.png" class="opacity6" alt="Непрозрачный вовсе">
</body>
</html>
Прозрачность в IE
Браузер Internet Explorer не поддерживает свойства opacity вплоть до девятой версии, однако имеет свой собственный фильтр с помощью которого можно задать степень прозрачности:
filter: alpha(opacity=50)
Значение opacity для фильтра браузера Internet Explorer может варьироваться от 0 - полностью прозрачный до 100 - непрозрачный.
Теперь работает и в Internet Explorer
Пример CSS3:
.opacity1 {opacity: 0; filter: alpha(opacity=0);} /* Полная прозрачность */
.opacity2 {opacity: 0.05; filter: alpha(opacity=10);} /* Почти совсем совсем прозрачный */
.opacity3 {opacity: .3; filter: alpha(opacity=30);} /* Можно и так писать без нуля вначале */
.opacity4 {opacity: 0.5; filter: alpha(opacity=50);} /* Полупрозрачный */
.opacity5 {opacity: 0.874; filter: alpha(opacity=80);} /* Можно задавать очень точную степень прозрачности */
.opacity6 {opacity: 1; filter: alpha(opacity=100);} /* Совсем не прозрачный */
Пример HTML:
<head>
<title>My CSS3</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<img src="/CSS3.png" class="opacity1" alt="Полностью прозрачный рисунок">
<img src="/CSS3.png" class="opacity2" alt="Почти совсем прозрачный 0.05">
<img src="/CSS3.png" class="opacity3" alt="Прозрачность рисунка .3 да, ноль писать вовсе не обязательно">
<img src="/CSS3.png" class="opacity4" alt="Полупрозрачный рисунок">
<img src="/CSS3.png" class="opacity5" alt="Прозрачность рисунка может быть заданна очень точно 0.874">
<img src="/CSS3.png" class="opacity6" alt="Непрозрачный вовсе">
</body>
</html>
Задание:
Создайте страничку как показано на рисунке.
В предыдущем уроке мы рассматривали свойства текста
В следующем уроке рассмотрим возможности работы с цветом в CSS 3