CSS прозрачность - кросс-браузерное решение
Опубликовано: 01.09.2018
В данном уроке мы рассмотрим 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>Вот результа размещенного выше кода:
Прозрачность текста.
Присвоив свойство 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:
ПодробностиОпубликовано: 26 Сентябрь 2013
Обновлено: 15 Октябрь 2013
Просмотров: 31258