Прозрачность

Свойство 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

О нас

Добро пожаловать в каталог продукции DigiPortfoolio OÜ.

Начиная с 2001 года мы обучались и развивались в сфере мультимедийного дизайна. На данный момент мы предлагаем услуги по созданию интернет дизайна, печатного дизайна, разработки рекламы, создание сайтов, туров 360 градусов.

Так же мы можем сделать печать на различных материалах и размерах. Изготовляем наклейки, визитки, roll-up стенды, сувенирную продукцию, печать на футболках.

В каталоге Вы найдете предлагаемые варианты, так же Вы можете связаться с нами по телефону +372 5596 5762 или прислать свой заказ на электронную почту info@digipo.eu

Ищите нас в социальных сетях:      

Мы в соцсетях

Смотрите нас в соцсетях, там мы буликуем готовые работы.