CSS3-прозрачность (opacity)
2.11.2022QuirksMode.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).
Пример работает также и в Opera 9.02
2006-11-02 at 5:11 pm
DpakoH, спасибо, добавлю.
2006-11-02 at 5:25 pm
Спасибо за инфу. Берем на заметку.
2006-11-02 at 5:51 pm
В ранних версиях Mozilla (до версии 1.7) и FireFox было свойство “-moz-opacity”, доступное через JS как MozOpacity:
http://developer.mozilla.org/en/docs/CSS:-moz-opacity
Так же ссылка по теме:
http://xulplanet.com/references/elemref/ref_StyleProperties.html
у Opera, кстати, тоже есть “нестандартные” стили, начинающиеся с “-o-”.
2006-11-02 at 8:55 pm
Тоже полезно почитать http://tigir.com/opacity.htm
2006-12-06 at 10:46 am
>> Тоже полезно почитать http://tigir.com/opacity.htm
Не тоже полезно, а нужно. В первую очередь авторам.
2006-12-11 at 10:05 pm
Спасибо ;)
2007-02-18 at 12:17 pm
Народ!
Подскажите, как сделать, чтобы текст в div с opacity: 0.2 внутри (еще один див) отображался не прозрачным? Установка опасити в вложенном диве 1.0 не помагает (
2007-03-19 at 1:45 am
Столкнулся с той же проблеммой, вышел из ситуации поместив “вложенный див” за пределы полупрозрачного и установкой у него z-index больше чем у прозрачного ;-)
2007-03-23 at 2:36 pm
Хм, а если дизайн, не фиксированный? ? даже не стандартные 800, 1024, 1280 хочу? Что тогда? Писать Джава-скрипт на определение ширины нашего прозрачного дива и динамически менять ширину z-index’a? ))
2007-03-28 at 8:39 pm
в опере 9 ваш сайт плющит, мама не горюй!!!
ребята, вы же про это пишите, а сайт не делаете!!
2007-04-03 at 10:54 pm
blaЭbla.comhttp:ююfiles.on.kg
Ребятки…
ЧТОЖЕ у вас за ГЛУПОСТЬ :(
это не CSS3 это ФТОРАЯ версия !!!
нукакамаленькие !!!
3-ю поддерживает тока 7-я иешка и частично 6,0 !!! 5,5 этог уже CSSv2 !!!
аяяй….
Градиент, инверсия цветоф, ч/б, устаноффка прозрачного цвета – все это ЦыэСэС 2-й !!! и никак не 3-й !!!
2007-04-18 at 8:07 am
>>Градиент, инверсия цветоф, ч/б, устаноффка прозрачного цвета – все это ЦыэСэС 2-й !!! и никак не 3-й !!!
Да неужели? А ссылку на спецификацию продемонстрировать?
2007-05-27 at 11:20 pm
попробуйте так… в IE7 работает точно… style=”position:relative;z-index:5;”
2007-06-18 at 3:38 pm
Мучался, мучался с прозрачность во всплывающих окнах, итого png + fix для ослика шестого, надоел он страсть как, когда же его самого пофиксят)
2007-08-09 at 12:24 am
?скал чего нового напридумывали, чтобы делать градиенты, набрёл сюда. Сами градиенты пока не вижу, зато нашёл прозрачность, которую считал уделом IE-шных фильтров.
Если будет составляться табличка, чего где работает, то прозрачность отлично отображается в Opera 9.2
2007-09-27 at 3:38 pm
Народ, а как сделать следующйи css валидным :(
А то валидатор на эти опацити ругается…, зато работает во всех браузерах…
.k {
filter: alpha(opacity=60);
-moz-opacity: 0.60;
-khtml-opacity: 0.60;
opacity: .60;
}
Ещё раз повторюсь. ?нтерисует именно валидное написание! Чтобы http://jigsaw.w3.org/css-validator/ не ругался на такой код :(
2007-10-05 at 12:17 am
?нтересная вещь.. Правда обидно, что поддерживается пока скромным набором браузеров и довольно коряво.. Будем ждать когда css3 будет поддерживаться всеми ведущими браузерами.
2007-10-27 at 12:56 am
Faster
не пробовал просто вынести хаки в отдельный css и забыть про его валидность ?!
2007-10-27 at 1:12 am
В ff под linux этот пример работает.
2007-11-30 at 7:23 pm
>>Ещё раз повторюсь. ?нтерисует именно валидное написание!
Ох, достали меня эти валидаторы. Делаешь код, работающий во всех браузерах, а они: “Валидно-невалидно”!
Когда браузеры будут валидны, тогда можно говорить о валидности. А пока нужно добиваться совместимости, а не валидности. ?ногда, чтобы получить валидный вариант с явно не валидными участками кода, приходится эти участки подставлять яваскриптом или комментировать их, а скриптом вписывать конец комментария. ?зврещение, конечно, но зато любители валидного кода не возмущаются.
А какая, по большому счету разница, валиден ли код? Главное, как он работает.
2008-01-09 at 2:10 pm
отлично, благодарю за ценный урок)
2008-02-27 at 12:35 am
Плз, подскажите, все отлично работает, но когда ставлю размер шрифта в ?Е 24px, то при появлении шрифт становится рубленным, прозрачные пиксели становятся в 100% и выглядит просто ужасно!
Можно ли этим как-то бороться ?..
Заранее большое спасибо!
2008-03-04 at 4:33 pm
for Sterh
Применяя прозрачность к тексту большого размера в Internet Explorer, вы столкнетесь с тем, что этот текст будет зазубренным.
Для устранения этого неприятного “спецэффекта” следует задать фон текстовому элементу, к которому применяется прозрачность, установив CSS cвойство background-color.
Читай здесь
2008-03-15 at 5:17 pm
Не понял…. Для свойства opacity 0 – не прозрачный разве значит?!
Что вы понимаете под прозрачностью?
Я это использую. ? почему то наоборот 0 – прозрачно…. на мой взгляд.
Эксперимент:
1. Заливаем всю страницу каким ни то фоном
2. Вставляем img
3. Задаем для img opacity:
0 – картинки не видно (в моем понимании прозрачна)
0.5 – Смешаны картинка и фон
1 – четко видна картинка (в моем понимании непрозрачна)
2008-06-03 at 12:31 am
Очень полезный пост. ?спользовал в сайте.
2008-08-16 at 10:11 am