Первый способ подойдет для слоя фиксированного размера, а также изображений и использует следующий прием. Раз текст наследует значение прозрачности, то слой-подложку и слой с текстом надо не вкладывать один в другой, а расположить рядом. После чего с помощью стилей наложить один слой поверх другого. Для этой цели воспользуемся позиционированием. К контейнеру-родителю (назовем его semiopacity) следует добавить атрибут position со значением relative, а к дочернему слою (с именем text) - position со значением absolute. В подобных случаях положение слоя отсчитывается от левого верхнего угла родительского элемента. После добавления атрибутов left и top с нулевыми значениями текст окажется поверх родительского слоя.
Также следует создать слой (назовем его transparent), который будет выступать в качестве полупрозрачной подложки для текста. К стилю этого слоя добавим атрибут filter со знаением alpha(Opacity=50) для браузера Internet Explorer и opacity для остальных браузеров (пример 1).
Пример 1. Наложение слоев
HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Прозрачность в слое</title> <style type="text/css"> BODY { background: url(images/line.gif); /* Фоновый рисунок */ } .semiopacity { position: relative; /* Относительное позиционирование */ width: 100%; /* Ширина слоя для IE */ height: 200px; /* Высота слоя */ } .semiopacity .transparent { background: #fc0; /* Цвет фона */ opacity: 0.5; /* Значение прозрачности */ filter: alpha(Opacity=50); /* Прозрачность в IE */ height: 100%; /* Высота слоя */ } .semiopacity .text { padding: 5px; /* Поля вокруг текста */ position: absolute; /* Абсолютное позиционирование */ left: 0; top: 0; /* Положение слоя */ } </style> </head> <body> <h2>Великие Кометы</h2> <div class="semiopacity"> <div class="transparent"></div> <div class="text"> Исполинская звездная спираль с поперечником в 50 кпк, это удалось установить по характеру спектра, прекрасно иллюстрирует метеорный дождь, тем не менее, Дон Еманс включил в список всего 82-е Великие Кометы. </div> </div> </body>
</html>
Недостатком приведенного метода являются заданные размеры блока, что накладывает свои ограничения при использовании текста различного объема. Частично эти проблемы снимает применение полупрозрачного изображения в формате PNG-24.
Предварительно готовим в графическом редакторе однотонный полупрозрачный рисунок (рис. 2).
После чего добавляем рисунок в качестве фона через атрибут background, как показано в примере 2.
Пример 2. Использование полупрозрачного рисунка
HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Прозрачность в слое</title> <style type="text/css"> BODY { background: url(images/line.gif); /* Фоновый рисунок */ } .semiopacity { padding: 5px; /* Поля вокруг текста */ background: url(images/opacity.png); /* Полупрозрачный фон */ } </style> </head> <body> <div class="semiopacity"> Магнитное поле, это удалось установить по характеру спектра, выслеживает космический метеорит, день этот пришелся на двадцать шестое число месяца карнея, который у афинян называется метагитнионом. </div> </body>
</html>
Устаревший браузер Internet Explorer не работает с полупрозрачностью в PNG-24, если по каким-либо причинам необходимо поддерживать этот браузер, для него придется использовать скрипты.
Приведенный метод хотя и снимает вопрос с размерами блока, но имеет ряд ограничений. Так, при отключении картинок в браузере, фон исчезнет вообще. К тому же не так легко изменить цвет фона и значение прозрачности, для этого придется опять редактировать изображение.