Tel: +372 5596 5762
e-mail: info@digipo.eu

Свойство CSS 3 opacity позволяет делать прозрачным тот или иной элемент сайта.
Степень прозрачности элемента определяется значением от 0 до 1 где 0 – полностью прозрачный а 1 – непрозрачный вовсе.. Так например значение 0.5 свойства opacity применённого к картинке будет значить что данное изображение должно быть полупрозрачным.

Полностью прозрачный рисунок Почти совсем прозрачный 0.05 Прозрачность рисунка .3 да, ноль писать вовсе не обязательно Полупрозрачный рисунок Прозрачность рисунка может быть заданна очень точно 0.874 Непрозрачный вовсе

Пример 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

Полностью прозрачный рисунок Почти совсем прозрачный 0.05 Прозрачность рисунка .3 да, ноль писать вовсе не обязательно Полупрозрачный рисунок Прозрачность рисунка может быть заданна очень точно 0.874 Непрозрачный вовсе

Пример 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>

Задание:

Создайте страничку как показано на рисунке.

opacity

 

В предыдущем уроке мы рассматривали свойства текста

В следующем уроке рассмотрим возможности работы с цветом в CSS 3