Свойство opacity
Свойство CSS 3 opacity задает значение прозрачности и варьируется от 0 до 1, где ноль это полная прозрачность элемента, а единица, наоборот, непрозрачность. У свойства opacity есть особенность — прозрачность распространяется на все дочерние элементы, и они не могут превысить значение прозрачности своего родителя. Получается, что непрозрачный текст на полупрозрачном фоне быть не может (пример 2).
Пример 1. Использование opacity
XHTML 1.0CSS 2.1CSS 3IE 7IE 8IE 9Cr 12Op 11Sa 5Fx 4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Прозрачность в слое</title>
<style type="text/css">
BODY {
background: url(images/star.png); /* Фоновый рисунок */
}
.semiopacity {
background: #0078c9; /* Цвет фона */
padding: 5px; /* Поля вокруг текста */
opacity: 0.7; /* Полупрозрачный фон */
filter: alpha(Opacity=70); /* Прозрачность в IE */
color: #fff; /* Цвет текста */
}
</style>
</head>
<body>
<div class="semiopacity">
Магнитное поле, это удалось установить по характеру спектра, выслеживает
космический метеорит, день этот пришелся на двадцать шестое
число месяца карнея, который у афинян называется метагитнионом.
</div>
</body>
</html>
В Internet Explorer до версии 8.0 включительно opacity не работает, поэтому для него используется специфичное для этого браузера свойство filter. Естественно, оно приводит к невалидному коду CSS.
RGBA
Современный подход гораздо проще и нагляднее вышеприведенных методов и состоит в использовании для цвета и фона формат RGBA. Первые три буквы знакомы многим и расшифровываются как red, green, blue (красный, зеленый, синий), последняя символизирует собой альфа-канал и задает прозрачность элемента. Формат записи такой.
background-color: rgba(r, g, b, a);
В скобках вместо букв ставится значение компонента цвета, его можно посмотреть в любом графическом редакторе, последнее же значение устанавливает прозрачность и совпадает со значением свойства opacity.
Не все браузеры поддерживают такой формат: Internet Explorer начиная с версии 9, Opera с версии 10, Firefox с 3, Safari с 3.2. Но в целом, современные браузеры корректно отображают прозрачность. Для старых версий IE можно отдельно указать цвет в привычном для него формате, при этом, естественно, никакой прозрачности не будет. Или опять воспользоваться свойством filter, но тогда придется мириться, что прозрачность также затронет и текст (пример 3). Чтобы соблюсти валидный код CSS, я воспользовался условными комментариями.
Пример 2. Использование RGBA
HTML 5CSS 3IE 7IE 8IE 9Cr 12Op 11Sa 5Fx 4
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Полупрозрачный фон</title>
<style type="text/css">
body {
background: url(images/star.png); /* Фон веб-страницы */
}
.transparent {
background-color: rgba(0, 120, 201, 0.7); /* Цвет фона и значение прозрачности */
padding: 10px; /* Поля вокруг текста */
color: #fff; /* Цвет текста */
}
</style>
<!--[if lt IE 9]>
<style type="text/css">
.transparent {
background-color: #0078c9;
filter: alpha(Opacity=70); /* Прозрачность в IE */
}
</style>
<![endif]-->
</head>
<body>
<div class="transparent">
Исполинская звездная спираль с поперечником в 50 кпк,
это удалось установить по характеру спектра, прекрасно иллюстрирует метеорный
дождь, тем не менее, Дон Еманс включил в список всего 82 Великие Кометы.
</div>
</body>
</html>
В браузере Internet Explorer 7 обнаружился баг при сочетании background-color с разными значениями. К примеру, если задать цвет фона красным, как показано ниже, то фон в IE7 вообще не отобразится.
div {
background-color: red; /* В IE7 не применяется */
background-color: rgba(255, 0, 0, 0.5);
}
Решается это заменой свойства background-color на background.
div {
background: red; /* А это работает */
background: rgba(255, 0, 0, 0.5);
}
Однако здесь есть один нюанс. Валидатор CSS «ругается» на background, если ему задать значение в формате RGBA. Но при этом корректно относится к background-color. В общем, как всегда, приходится выбирать между браузерами и валидностью.