CSS3-прозрачность (opacity)

QuirksMode.org: opacity

Как установить прозрачность элементу.

Пример

Непрозрачный параграф с текстом.

Параграф с текстом, прозрачность: 50%.

CSS:


.test {
   background-color: #008B00;
   color: #ffffff;
   width: 100%;
}

.opaque {
   opacity: .5;
   filter: alpha(opacity=50);
}

Safari, Mozilla, Opera 9

Эти браузеры поддерживают opacity. Для указания прозрачности (opacity) используются числа от 0.0 (не прозрачный) до 1.0 (прозрачный), нельзя указывать единицы в процентах.

Explorer Windows

Для Explorer Windows нужно:


filter: alpha(opacity=50);

Замечание: чтобы filter работал, его нужно применять к элементам разметки (block level).

Вы должны определить ширину (width) или высоту (height) для любого элемента, которому надо установить прозрачность, (за исключением полей формы, потому что у них по умолчанию установлена ширина). Подробнее об этом можно узнать здесь: Introduction to Filters and Transitions.

Описанное выше не будет работать в Explorer 5.0 Windows, Explorer Mac, и iCab.

Еще замечание: так как opacity будет определено в CSS3, таблица стилей этой страницы в настоящее время не проходит валидацию.

Смотрите также: JavaScript изменение прозрачности (Opacity setting).



Много комментариев (26) к “CSS3-прозрачность (opacity)”

  1. DpakoH :

    Пример работает также и в Opera 9.02


  2. Баранов Андрей :

    DpakoH, спасибо, добавлю.


  3. Dimox :

    Спасибо за инфу. Берем на заметку.


  4. BOLK :

    В ранних версиях Mozilla (до версии 1.7) и FireFox было свойство “-moz-opacity”, доступное через JS как MozOpacity:

    http://developer.mozilla.org/en/docs/CSS:-moz-opacity

    Так же ссылка по теме:
    http://www.xulplanet.com/references/elemref/ref_StyleProperties.html

    у Opera, кстати, тоже есть “нестандартные” стили, начинающиеся с “-o-”.


  5. Света :

    Тоже полезно почитать http://www.tigir.com/opacity.htm


  6. Churchik :

    >> Тоже полезно почитать http://www.tigir.com/opacity.htm

    Не тоже полезно, а нужно. В первую очередь авторам.


  7. SvT :

    Спасибо ;)


  8. Cionict :

    Народ!
    Подскажите, как сделать, чтобы текст в div с opacity: 0.2 внутри (еще один див) отображался не прозрачным? Установка опасити в вложенном диве 1.0 не помагает (


  9. iBOG :

    Столкнулся с той же проблеммой, вышел из ситуации поместив “вложенный див” за пределы полупрозрачного и установкой у него z-index больше чем у прозрачного ;-)


  10. Cionict :

    Хм, а если дизайн, не фиксированный? И даже не стандартные 800, 1024, 1280 хочу? Что тогда? Писать Джава-скрипт на определение ширины нашего прозрачного дива и динамически менять ширину z-index’a? ))


  11. Serge :

    в опере 9 ваш сайт плющит, мама не горюй!!!
    ребята, вы же про это пишите, а сайт не делаете!!


  12. VoFFann :

    blaЭbla.comhttp:ююfiles.on.kg
    Ребятки…
    ЧТОЖЕ у вас за ГЛУПОСТЬ :(
    это не CSS3 это ФТОРАЯ версия !!!
    нукакамаленькие !!!
    3-ю поддерживает тока 7-я иешка и частично 6,0 !!! 5,5 этог уже CSSv2 !!!
    аяяй….
    Градиент, инверсия цветоф, ч/б, устаноффка прозрачного цвета – все это ЦыэСэС 2-й !!! и никак не 3-й !!!


  13. Timok :

    >>Градиент, инверсия цветоф, ч/б, устаноффка прозрачного цвета – все это ЦыэСэС 2-й !!! и никак не 3-й !!!

    Да неужели? А ссылку на спецификацию продемонстрировать?


  14. Михаил Мых :

    попробуйте так… в IE7 работает точно… style=”position:relative;z-index:5;”


  15. neznaika :

    Мучался, мучался с прозрачность во всплывающих окнах, итого png + fix для ослика шестого, надоел он страсть как, когда же его самого пофиксят)


  16. Light :

    Искал чего нового напридумывали, чтобы делать градиенты, набрёл сюда. Сами градиенты пока не вижу, зато нашёл прозрачность, которую считал уделом IE-шных фильтров.
    Если будет составляться табличка, чего где работает, то прозрачность отлично отображается в Opera 9.2


  17. Faster :

    Народ, а как сделать следующйи css валидным :(
    А то валидатор на эти опацити ругается…, зато работает во всех браузерах…

    .k {
    filter: alpha(opacity=60);
    -moz-opacity: 0.60;
    -khtml-opacity: 0.60;
    opacity: .60;
    }

    Ещё раз повторюсь. Интерисует именно валидное написание! Чтобы http://jigsaw.w3.org/css-validator/ не ругался на такой код :(


  18. Сергей :

    Интересная вещь.. Правда обидно, что поддерживается пока скромным набором браузеров и довольно коряво.. Будем ждать когда css3 будет поддерживаться всеми ведущими браузерами.


  19. Александр :

    Faster

    не пробовал просто вынести хаки в отдельный css и забыть про его валидность ?!


  20. jangot :

    В ff под linux этот пример работает.


  21. Константин :

    >>Ещё раз повторюсь. Интерисует именно валидное написание!

    Ох, достали меня эти валидаторы. Делаешь код, работающий во всех браузерах, а они: “Валидно-невалидно”!
    Когда браузеры будут валидны, тогда можно говорить о валидности. А пока нужно добиваться совместимости, а не валидности. Иногда, чтобы получить валидный вариант с явно не валидными участками кода, приходится эти участки подставлять яваскриптом или комментировать их, а скриптом вписывать конец комментария. Изврещение, конечно, но зато любители валидного кода не возмущаются.
    А какая, по большому счету разница, валиден ли код? Главное, как он работает.


  22. фотогений :

    отлично, благодарю за ценный урок)


  23. Sterh :

    Плз, подскажите, все отлично работает, но когда ставлю размер шрифта в ИЕ 24px, то при появлении шрифт становится рубленным, прозрачные пиксели становятся в 100% и выглядит просто ужасно!

    Можно ли этим как-то бороться ?..
    Заранее большое спасибо!


  24. Mastik :

    for Sterh
    Применяя прозрачность к тексту большого размера в Internet Explorer, вы столкнетесь с тем, что этот текст будет зазубренным.
    Для устранения этого неприятного “спецэффекта” следует задать фон текстовому элементу, к которому применяется прозрачность, установив CSS cвойство background-color.
    Читай здесь


  25. voral :

    Не понял…. Для свойства opacity 0 – не прозрачный разве значит?!
    Что вы понимаете под прозрачностью?

    Я это использую. И почему то наоборот 0 – прозрачно…. на мой взгляд.
    Эксперимент:
    1. Заливаем всю страницу каким ни то фоном
    2. Вставляем img
    3. Задаем для img opacity:
    0 – картинки не видно (в моем понимании прозрачна)
    0.5 – Смешаны картинка и фон
    1 – четко видна картинка (в моем понимании непрозрачна)


  26. Рнекуп :

    Очень полезный пост. Использовал в сайте.



Высококачественное изготовление мебели в Москве

22 queries 0.237 seconds.