CSS прозрачность - кросс-браузерное решение

CSS прозрачность - кросс-браузерное решение - 3.8 out of 5 based on 6 votes

В данном уроке мы рассмотрим CSS прозрачность, узнаем как придать различным элементам страницы прозрачность и добиться полной кросс-браузерности, т. е. одинаковой работы этого эффекта в различных браузерах.

CSS прозрачность фона, картинки, текста - кросс-браузерное решение

Как задать прозрачность любого элемента

В CSS3 за создание прозрачных элементов отвечает свойство opacity, которое можно применять к любым элементам. У данного свойства имеются значения от 0 до 1, которые и определяют степень прозрачности. Где 0 - это полная прозрачность, (значение по умолчанию для всех элементов), а 1 полная непрозрачность. Записываются значения дробями: 0.1, 0.2, 0.3 и т. д.

Пример использования:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Прозрачность</title>
 <style>
 
 .im {
filter: alpha(Opacity=50);
-moz-opacity: 0.5; 
-khtml-opacity: 0.5;
opacity: 0.5; 
 }
 
 </style>
 </head>
 <body>
 <p>
 <img src="/dog.png" alt="Оригинальное изображение">
 <img src="/dog.png" alt="Прозрачность 50%" class="im">
 </p>
 </body>
</html>

Пример прозрачного изображения

Кросс-браузерность прозрачности

Не все браузеры одинаково воспринимают и реализуют указанное выше свойство opacity. В некоторых случаях необходимо использовать другое название свойства или фильтры.

Свойство CSS3 opacity поддерживают следующие виды браузеров Mozilla 1.7 +, Firefox 0.9 +, Safari 1.2 +, Opera 9 +.

Такой хороший :) браузер как Internet Explorer вплоть до версии 9,0 не поддерживает свойство opacity и для создания прозрачности для этого браузера нужно использовать свойство filter и значение alpha(Opacity=X), в котором Х - это целое число в диапазоне от 0 до 100 при помощи которого определяется уровень прозрачности. 0 - это полная прозрачность, а 100 - полная непрозрачность.

Что касается браузера Firefox до версии 3.5 он поддерживает свойство -moz-opacity вместо opacity.

Такие браузеры как Safari 1.1 и Konqueror 3.1, построенные на движке KHTML, используют для управления прозрачностью свойство: -khtml-opacity.

Как же задать в CSS прозрачность, чтобы это выглядело во всех браузерах одинаково? Для создания кросс-браузерного решения для прозрачности элементов им нужно прописывать не только одно свойство opacity, а следующий набор свойств:

filter: alpha(Opacity=50); /* Прозрачность для IE */
-moz-opacity: 0.5; /* Поддержка Mozilla 3.5 и ниже */
-khtml-opacity: 0.5; /* Поддержка Konqueror 3.1 и Safari 1.1 */
opacity: 0.5; /* Поддержка всех остальных браузеров */

Прозрачность различных элементов

Рассмотрим некоторые примеры задания прозрачности определенным элементам, которые чаще всего используются на странице.

CSS прозрачность картинки.

Рассмотрим несколько вариантов создания полупрозрачной картинки. В следующем примере первой картинки не задана прозрачность, вторая имеет прозрачность 50%, третья 30%.

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Прозрачность</title>
 <style>
 
 .im1 {
filter: alpha(Opacity=50);
-moz-opacity: 0.5; 
-khtml-opacity: 0.5;
opacity: 0.5; 
 }
 
 .im2 {
filter: alpha(Opacity=30);
-moz-opacity: 0.3; 
-khtml-opacity: 0.3;
opacity: 0.3; 
 }
 
 </style>
 </head>
 <body>
 <p>
 <img src="/euro.png" alt="Оригинальное изображение">
 <img src="/euro.png" alt="Прозрачность 50%" class="im1">
 <img src="/euro.png" alt="Прозрачность 30%" class="im2">
 </p>
 </body>
</html>

Результат:

Варианты прозрачности картинки

Прозрачность на CSS при наведении курсора на картинку .

Часто необходимо сделать прозрачным картинку или любой другой элемент в тот момент когда на его наведен курсор.  Сделать это можно при помощи CSS псевдокласса :hover. Для этого нашей картинке нужно прописать два класса один обычный - это будет неактивное состояние картинки и второй класс с псевдоклассом :hover, здесь необходимо указать прозрачность картинки в момент наведения курсора.

Пример:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Прозрачность</title>
 <style>
 
 .im1 {
filter: alpha(Opacity=100);
-moz-opacity: 1; 
-khtml-opacity: 1;
opacity: 1; 
 }
 .im1:hover {
filter: alpha(Opacity=50);
-moz-opacity: 0.5; 
-khtml-opacity: 0.5;
opacity: 0.5; 
 }
 
 .im2 {
filter: alpha(Opacity=30);
-moz-opacity: 0.3; 
-khtml-opacity: 0.3;
opacity: 0.3; 
 }
 .im2:hover {
filter: alpha(Opacity=100);
-moz-opacity: 1; 
-khtml-opacity: 1;
opacity: 1; 
 }
 
 </style>
 </head>
 <body>
 <p>
 <img src="/lyx.png" class="im1">
 <img src="/computer.png" class="im2">
 </p>
 </body>
</html>

Результат можете посмотреть в демо.

Демо

Прозрачность фона на CSS.

Здесь необходимо помнить, что прозрачность распространяется на все вложенные элементы и они не могу обладать большей прозрачностью чем вложенный элемент.

В качестве примера приведем вариант с фоном страницы созданным при помощи картинки и блоком с фоном созданным при помощи цвета и обладающим прозрачностью 50%.

Пример кода:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Прозрачность</title>
 <style>
 
 BODY {
 background: url(bg.png); /* Изображение в качестве фона */
 }
 .blok {
background: #FC0; /* Цвет фона */
padding: 5px; /* Внутренний отступ */
color: #000000; /* Цвет текста */
filter: alpha(Opacity=50); 
-moz-opacity: 0.5; 
-khtml-opacity: 0.5;
opacity: 0.5; 
 }
 
 </style>
 </head>
 <body>
<div class="blok">
 Текст
 </div>
 </body>
</html>

Вот результа размещенного выше кода:

CSS прозрачность фона

Прозрачность текста.

Присвоив свойство opacity любому элементу в который вложен текст, сам текст как и элемент становиться прозрачным. Вот пример создания прозрачного текста на CSS: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Прозрачность</title>
<style>
BODY {
background: url(bg.png); /* Изображение в качестве фона */
}
.blok {
font-size:72px; /* Размер шрифта */
font-weight:bold; /* Выделение текста жирным шрифтом */
padding: 5px; /* Внутренний отступ */
color: #333; /* Цвет текста */
filter: alpha(Opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
</style>
</head>
<body>
<p class="blok">
Прозрачный текст!
</p>
</body>
</html>

Результат работы кода:

CSS прозрачность текста

1 1 1 1 1 1 1 1 1 1 Рейтинг 3.83 (6 Голосов)
Подробности
Опубликовано: 26 Сентябрь 2013
Обновлено: 15 Октябрь 2013
Просмотров: 35182