Stfw.RuКак создать полупрозрачный слой с непрозрачным текстом?
🕛 19.01.2009, 20:50
Для задания степени прозрачности элемента применяется атрибут opacity, который за исключением Internet Explorer-а понимается всеми современными браузерами. Но у этого атрибута есть особенность - прозрачность распространяется на все дочерние элементы, которые не могут превысить значение прозрачности своего родителя. Получается, что непрозрачным текст на полупрозрачном фоне быть не может. Тем не менее, есть способы обойти это ограничение.Первый способ подойдет для слоя фиксированного размера, а также изображений и использует следующий прием. Раз текст наследует значение прозрачности, то слой-подложку и слой с текстом надо не вкладывать один в другой, а расположить рядом. После чего с помощью стилей наложить один слой поверх другого. Для этой цели воспользуемся позиционированием. К контейнеру-родителю (назовем его 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, если по каким-либо причинам необходимо поддерживать этот браузер, для него придется использовать скрипты.
Приведенный метод хотя и снимает вопрос с размерами блока, но имеет ряд ограничений. Так, при отключении картинок в браузере, фон исчезнет вообще. К тому же не так легко изменить цвет фона и значение прозрачности, для этого придется опять редактировать изображение.