gruphepsi.us - Как сделать непрозрачный текст в прозрачном блоке - Проблемы верстки


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

Автор: Евгений Рыжков Дата публикации: 21.01.2009

Задача

Сделать элемент HTML (например выпадающее меню) полупрозрачным.

Наведи на меня курсор
  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4
Наведи на меня курсор
  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4
Выпадающее меню с полупрозрачностью
(opacity=0.5) Выпадающее меню без прозрачности

Решение

В стилях для нужного элемента задаем:

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); / IE 5.5+/ -moz-opacity: 0.5; / Mozilla 1.6 и ниже / -khtml-opacity: 0.5; / Konqueror 3.1, Safari 1.1 / opacity: 0.5; / CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ /

Теория

W3C в своей рекомендации CSS3 задает свойство opacity для применения эффекта прозрачности элементов. Степень прозрачности задается в диапазоне 0 (полностью прозрачен) до 1 (полностью не прозрачен).

К сожалению еще не все браузеры поддерживают opacity. Для полной кроссбраузерности применяем:

  • filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); — для ИЕ версии выше 5.5-7 прозрачность реализуется с помощью фильтра Alpha DirectX. Значение задается в диапазоне от 0 до 100. Сокращенный (не рекомендуемый) вариант — filter: alpha(opacity=50);
  • -moz-opacity — для старых версий Mozilla (1.6 и ниже) и Firefox (до 1.6)
  • -khtml-opacity — для Safari 1.1 и Konqueror 3.1
Минусы

filter, -moz-opacity, -khtml-opacity валидации не проходят. Opacity — только CSS Level 3.

Возможные проблемы

Не работает в IE. Причина — не указаны width как сделать прозрачность блока и height. Или можно добавить zoom: 1

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); / IE 5.5+/ -moz-opacity: 0.5; / Mozilla 1.6 и ниже / -khtml-opacity: 0.5; / Konqueror 3.1, Safari 1.1 / opacity: 0.5; / CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ / zoom: 1; / для элемента в ИЕ, у которого не заданы width и height /

update 23.09.10 by Егор Скорняков может так же не работать, если применить к блоку с очень большими размерами (например, 9999x9999px).

Делаем полупрозрачный фон

При добавлении эффекта прозрачности элементу, все вложенные элементы тоже становятся прозрачными. Из-за этого могут возникнуть некоторые трудности, например, текст становится трудночитаемым. Для решения этой проблемы применяется метод с использование прозрачного фона. В качестве примера будем использовать выпадающее меню. HTML код:

<div <!--обрабатываем события для показа/скрытия меню --> onmouseover="this.getElementsByTagName('div')[0].style.display='block'" onmouseout="this.getElementsByTagName('div')[0].style.display='none'" class="cssOpacityDiv"> Наведи на меня курсор <div class="cssOpacityDiv2"><!--выпадающий блок--> <div></div><!--полупрозрачный красный фон меню--> <ul class="cssOpacityUl"><!--меню--> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> <li>Пункт 4</li> </ul> </div> </div>

CSS код:

.cssOpacityDiv2 { display: none; position: absolute; left: 0; top: 24px; width: 208px; overflow: hidden; / обрезаем лишний фон / }.cssOpacityDiv2 div { background: #990000; / цвет фона меню / opacity: 0.5; / степень прозрачности / filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); / степень прозрачности для ие / width: 100%; / ширина раная ширине родительского блока / height: 1000px; / высоту задаем большую, т.к. не знаем заранее сколько пунктов меню будет / position: absolute; z-index: 1; / указываем явно уровень по z-оси, чтобы сделать меню выше / top: 0; left: 0; }.cssOpacityUl { list-style: none; width: 208px; margin: 0; padding: 0; text-align: center; position: relative; / для того чтобы указать уровень по z-оси / z-index: 2; / задаем уровень больше, чем о полупрозрачного фона / }

Результат справа:

Наведи на меня курсор
  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4
Наведи на меня курсор
  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4
Выпадающее меню с полупрозрачностью
(opacity=0.5) Выпадающее меню с полупрозрачным фоном
(opacity=0.5)

Проверено в:


Источник: http://xiper.net/collect/html-and-css-tricks/css-tricks/css-opacity



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Прозрачность в веб или как сделать прозрачный блок в CSS, валидным? Как отправить приглашение по скайпу

Как сделать прозрачность блока Как сделать прозрачность css элементам на сайте Заметки
Как сделать прозрачность блока CSS прозрачность Делаем полупрозрачный фон
Как сделать прозрачность блока Ответы Как сделать блок прозрачным в css?
Как сделать прозрачность блока Правильная прозрачность / Хабрахабр
Как сделать прозрачность блока Как сделать прозрачность фона в CSS
Как сделать прозрачность блока Как сделать слой полупрозрачным?
Как сделать прозрачность блока Как сделать прозрачным div? - HTML, CSS
Как сделать прозрачность блока Прозрачность элементов CSS
Прозрачность Beady Beasties - Home Facebook Доска объявлений от частных лиц и компаний на Avito Ескизы Тату Драконов - Ескизы Татуировок - Галерея - Татуировки, наколки Женский форум : звезды, мода, красота, любовь История мальчика, родившегося с маской на лице - новости Как сделать сундук? Дизайн интерьера, эксклюзивный интерьер Коррекция съемного протеза. Лечение натертости Модные техники шеллака ногтей с рисунками

ШОКИРУЮЩИЕ НОВОСТИ