Свойство CSS opacity: управление прозрачностью. Как задать прозрачность в css – прозрачный блок
Эффект полупрозрачности элемента хорошо заметен на фоновом рисунке и получил распространение в разных операционных системах, потому что смотрится стильно и красиво. Главное, иметь под полупрозрачными блоками не однотонный рисунок, а изображение, именно в этом случае прозрачность становится заметной.
Такой эффект достигается разными способами, включая старомодные методы, как использование рисунка PNG в качестве фона, создание клетчатого изображения и свойство opacity. Но как только возникает необходимость сделать в блоке полупрозрачный фон, у этих методов оказываются неприятные оборотные стороны.
Рассмотрим полупрозрачность текста и фона - как правильно ее использовать в дизайне сайта:
Основная особенность этого свойства состоит в том, что значение прозрачности действует на все дочерние элементы внутри, а не только на фон. Это значит, что и фон и текст станут полупрозрачными. Увеличить уровень прозрачности можно изменяя команду opacity от 0.1 до 1.
HTML 5 CSS 3 IE 9 opacity body { background: url(images/cat.jpg); } div { opacity: 0.6; background: #fc0; /* Цвет фона */ padding: 5px; /* Поля вокруг текста */ } Создание и продвижение сайтов в интернете
В веб-дизайне частичная прозрачность также применяется и достигается за счёт формата цвета RGBA, который задаётся только для фона элемента.
Обычно в дизайне полупрозрачным должен быть только фон элемента, а текст непрозрачным для сохранения его читабельности. Свойство opacity здесь не подходит, потому что текст внутри элемента также будет частично прозрачным. Лучше всего использовать формат RGBA, частью которого является альфа-канал или иными словами значение прозрачности. В качестве значения пишется rgba, затем в скобках через запятую перечисляются значения красной, синей и зелёной компоненты цвета. Последним идёт прозрачность, которая задаётся от 0 до 1, при этом 0 означает полную прозрачность, а 1 непрозрачность цвета - синтаксис применения rgba.
Полупрозрачный фон HTML 5 CSS 3 IE 9 rgba body { background: url(images/cat.jpg); } div { background: rgba(0, 170, 238, 0.4); /* Цвет фона */ color: #fff; /* Цвет текста */ padding: 5px; /* Поля вокруг текста */ } Создание и продвижение сайтов в интернете. Значение непрозрачности для фона установлено 90% - полупрозрачный фон и непрозрачный текст.
Влад Мержевич
Частичная прозрачность при правильном ее использовании весьма эффектно смотрится в дизайне сайта. Главное, чтобы под полупрозрачными блоками был не однотонный рисунок, а изображение, именно в этом случае прозрачность становится заметной. Такой эффект достигается разными способами и если вспоминать все, включая старомодные методы, то это использование рисунка PNG в качестве фона, создание клетчатого изображения и свойство opacity . Но как только возникает необходимость сделать в блоке полупрозрачный фон, у этих методов оказываются неприятная оборотная сторона. Сделаю небольшой обзор, чтобы стало понятно, о чем идет речь, а также для тех читателей, которые не знакомы с нетрадиционными вариантами создания эффекта полупрозрачности.
PNG в качестве фонаВ графическом редакторе предварительно готовится однотонный полупрозрачный рисунок, который сохраняется в формате PNG-24 (рис. 1). Особенностью этого формата является поддержка 256 уровней прозрачности, или попросту говоря, он умеет отображать полупрозрачные картинки.
Рис. 1. Изображение для создания фона
После чего добавляем рисунок в качестве фона через свойство background , как показано в примере 1.
Пример 1. Использование полупрозрачного рисунка
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Прозрачность в слое BODY { background: url(images/star.png); /* Фоновый рисунок */ } .semiopacity { padding: 5px; /* Поля вокруг текста */ background: url(images/opacity.png); /* Полупрозрачный фон */ }
Результат данного примера показан на рис. 3.
Рис. 2. Применение фонового рисунка
Устаревший браузер Internet Explorer 6 не работает с полупрозрачностью в PNG-24, если по каким-либо причинам необходимо поддерживать этот браузер, для него придется использовать скрипты.
Приведенный метод имеет ряд ограничений. Так, при отключении картинок в браузере, фон исчезнет вообще. К тому же не так легко изменить цвет фона и значение прозрачности, для этого придется опять редактировать изображение.
Клетчатое изображениеЭтот метод относится совсем к древним способам реализации полупрозрачности, когда браузеры «ничего не умели», и приходилось искать нешаблонные решения. Фокус состоит в создании изображения, в котором чередуются прозрачные и непрозрачные пикселы (рис. 3). Такая регулярная структура создает эффект полупрозрачности, по сути его имитируя.
Рис. 3. Увеличенный клетчатый рисунок
Вот как в итоге это выглядит (рис. 4).
Рис. 4. Имитация полупрозрачности
Недостатки этого метода сравнимы с предыдущим, также может возникнуть муаровый узор и происходит ухудшение текста.
Свойство opacityСвойство CSS 3 opacity задает значение прозрачности и варьируется от 0 до 1, где ноль это полная прозрачность элемента, а единица, наоборот, непрозрачность. У свойства opacity есть особенность - прозрачность распространяется на все дочерние элементы, и они не могут превысить значение прозрачности своего родителя. Получается, что непрозрачный текст на полупрозрачном фоне быть не может (пример 2).
Пример 2. Использование opacity
XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx
Прозрачность в слое BODY { background: url(images/star.png); /* Фоновый рисунок */ } .semiopacity { background: #0078c9; /* Цвет фона */ padding: 5px; /* Поля вокруг текста */ opacity: 0.7; /* Полупрозрачный фон */ filter: alpha(Opacity=70); /* Прозрачность в IE */ color: #fff; /* Цвет текста */ } Магнитное поле, это удалось установить по характеру спектра, выслеживает космический метеорит, день этот пришелся на двадцать шестое число месяца карнея, который у афинян называется метагитнионом.
Результат примера показан на рис. 5.
Рис. 5. Полупрозрачность текста и фона
В Internet Explorer до версии 8.0 включительно opacity не работает, поэтому для него используется специфичное для этого браузера свойство filter . Естественно, оно приводит к невалидному коду CSS.
RGBAСовременный подход гораздо проще и нагляднее вышеприведенных методов и состоит в использовании для цвета и фона формат RGBA. Первые три буквы знакомы многим и расшифровываются как red, green, blue (красный, зеленый, синий), последняя символизирует собой альфа-канал и задает прозрачность элемента. Формат записи такой.
background-color: rgba(r, g, b, a);
В скобках вместо букв ставится значение компонента цвета, его можно посмотреть в любом графическом редакторе, последнее же значение устанавливает прозрачность и совпадает со значением свойства opacity .
Не все браузеры поддерживают такой формат: Internet Explorer начиная с версии 9, Opera с версии 10, Firefox с 3, Safari с 3.2. Но в целом, современные браузеры корректно отображают прозрачность. Для старых версий IE можно отдельно указать цвет в привычном для него формате, при этом, естественно, никакой прозрачности не будет. Или опять воспользоваться свойством filter , но тогда придется мириться, что прозрачность также затронет и текст (пример 3). Чтобы соблюсти валидный код CSS, я воспользовался условными комментариями.
Пример 3. Использование RGBA
HTML5 CSS3 IE Cr Op Sa Fx
Полупрозрачный фон body { background: url(images/star.png); /* Фон веб-страницы */ } .transparent { background-color: rgba(0, 120, 201, 0.7); /* Цвет фона и значение прозрачности */ padding: 10px; /* Поля вокруг текста */ color: #fff; /* Цвет текста */ } .transparent { background-color: #0078c9; filter: alpha(Opacity=70); /* Прозрачность в IE */ } Исполинская звездная спираль с поперечником в 50 кпк, это удалось установить по характеру спектра, прекрасно иллюстрирует метеорный дождь, тем не менее, Дон Еманс включил в список всего 82 Великие Кометы.
Результат примера можно посмотреть на рис. 6.
Рис. 6. Полупрозрачный фон с непрозрачным текстом
Сравните картинку с предыдущей, буквы стали ярче и четче.
В браузере Internet Explorer 7 обнаружился баг при сочетании background-color с разными значениями. К примеру, если задать цвет фона красным, как показано ниже, то фон в IE7 вообще не отобразится.
Div { background-color: red; /* В IE7 не применяется */ background-color: rgba(255, 0, 0, 0.5); }
Решается это заменой свойства background-color на background .
Div { background: red; /* А это работает */ background: rgba(255, 0, 0, 0.5); } Однако здесь есть один нюанс. Валидатор CSS «ругается» на background , если ему задать значение в формате RGBA. Но при этом корректно относится к background-color . В общем, как всегда, приходится выбирать между браузерами и валидностью.
Прозрачность в CSS довольно модная техника в последнее время, которая вызывает трудности в кроссбраузерной реализации. До сих пор не существует универсального метода, который бы позволял реализовать прозрачность для всех браузеров. Однако в последнее время ситуация заметно улучшилась.
В этой статье подробно рассмотрены существующие подходы, а также приведены примеры кода и пояснения, которые помогут вам добиться одинакового результата во всех браузерах с минимальными трудозатратами.
Стоит упомянуть следующий момент: несмотря на то что прозрачность используется вот уже в течение нескольких лет, она никогда не была частью стандарта CSS. Это нестандартное свойство, которое должно стать частью спецификации CSS3.
Старый подходВ старых версиях Firefox и Safari необходимо применять свойство следующим образом:
#myElement { -khtml-opacity: .5; -moz-opacity: 0.5; }
Свойство -khtml-opacity использовалось в старых версиях webkit-браузеров. Это свойство устарело и больше не нужно, кроме случаев когда вы уверены, что значительная часть трафика вашего сайта исходит от посетителей, использующих Safari 1.x, что, конечно, маловероятно.
В следующей строке используется свойство -moz-opacity , которое работало на очень ранних версиях движка Mozilla. Firefox прекратил его поддержку в версии 0.9.
CSS прозрачность в Firefox, Safari, Chrome и OperaДля большинства современных браузеров достаточно использовать следующее свойство:
#myElement { opacity: .7; }
В приведённом примере, элементу устанавливается значение непрозрачности 70% (30% прозрачности). То есть если мы установим значение в единицу, то элемент будет непрозрачным, и, соответственно, установка этого значения в ноль, сделает его невидимым.
Свойством opacity обрабатывается 2 десятичных цифры. То есть значение ".01" будет отличаться от значения ".02", хоть это и мало заметно.
CSS прозрачность для Internet ExplorerКак обычно, Internet Explorer не дружит с остальными браузерами. К тому же у нас сейчас в довольно широком использовании три версии этого браузера, установка прозрачности в каждой из которых различна и иногда требует дополнительных усилий для получения положительного результата.
#myElement { filter: alpha(opacity=40); }
В этом примере используется свойство filter , которое работает в версиях 6-8, однако для версий 6 и 7 есть одно ограничение: у элемента свойство hasLayout должно быть установлено в true . Это свойство присутствует только в IE и подробнее о нём можно почитать, например, на Хабре .
Ещё один способ установить прозрачность используя CSS в IE8 - это использовать следующий подход (обратите внимание на комментарии):
#myElement { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* работает в IE6, IE7 и IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* только для IE8 */ }
Первая строка будет работать во всех сейчас используемых версиях, вторая же - только в IE8. Обратите внимание, что во второй строке используется префикс -ms- , а значение взято в кавычки.
Установка и изменение CSS прозрачности с помощью JavaScript или jQueryВы можете использовать следующий код для установки прозрачности:
Document.getElementById("myElement").style.opacity = ".4"; // для большинства браузеров document.getElementById("myElement").style.filter = "alpha(opacity=40)"; // для IE
Конечно же, в этом случае гораздо проще использовать jQuery, кроме того, работать будет во всех браузерах:
$("#myElement").css({ opacity: .4 }); // работает во всех браузерах
Вы можете анимировать это свойство:
$("#myElement").animate({ opacity: .4 }, 1000, function() { // Анимация завершена; этот код работает во всех браузерах. });
Функция RGBAВ CSS3 планируется поддержка альфа-канала с помощью функции rgba . Эта функция работает в Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Используется она так:
#rgba { background: rgba(98, 135, 167, .4); }
В этом случае последний параметр указывает на уровень непрозрачности.
Функция HSLAПодобно предыдущей функции, CSS3 также позволяет задать полупрозрачный цвет с помощью функции HSLA , параметры которой означают тон (Hue), насыщенность (Saturation), яркость (Lightness) и альфа-канал (Alpha).
#hsla { background: hsla(207, 38%, 47%, .4); }
Важный момент при использовании функций rgba и hsla - это то, что установка прозрачности не применяется к дочерним элементам, тогда как использование свойства opacity - наследуется.
Свойство CSS opacity отвечает за прозрачность элементов (картинки, текста, блоки) в html.
Синтаксис CSS opacity
Где value может принимать вещественные значения в диапазоне от 0.0 до 1.0. Значение 1.0 — означает, что прозрачность отсутствует (по умолчанию).
Пример №1. Прозрачное изображение в htmlПервая картинка выведена без прозрачности, вторая с прозрачностью 0.5
.primer1{ padding: 5px; opacity: 0..jpg»>
По умолчанию блок частично прозрачный. При наведении курсора мыши блок становится ярким. Такие эффекты зачастую используются в дизайне сайтов.
.primer2{ padding: 5px; opacity: 0.5; } ..jpg»>
На странице преобразуется в следующее
Пример №3. Прозрачный блок на изображении в htmlНиже приведен пример полупрозрачного блока, который частично закрыл изображение. Блок специально накрывает изображение не полностью с целью показать, как он выглядит на пустом фоне.
.primer3{ padding: 5px; opacity: 1; } .block3{ width: 100px; height: 100px; background: #1E90FF; margin: 0px 0px -60px 80px; border: 1pxsolid #000; opacity: 0..jpg»>
На странице преобразуется в следующее
Примечание
Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.
Для обращения к opacity из JavaScript нужно писать следующую конструкцию:
object.style.opacity=»VALUE»
Читайте также:
. text-shadow
. Свойство zoom
. Отступы padding
. Отступы margin
. Как сделать рамку элементов border
. Как сделать фон на сайте html
. Как сделать анимацию в html
. Как сделать линейный градиент
. Радиальный градиент CSS
← Перейти в каталог CSS уроков
CSS прозрачность (Opacity vs RGBA)
На этом уроке мы с вами разберем такие CSS свойства – opacity и RGBA .
Прозрачность.Свойство Opacity отвечает только за прозрачность элементов, а функция RGBA – за цвет и прозрачность, если указать значение прозрачности альфа-канала.
CSS прозрачность OpacityЦифровое значение для opacity задано в пределах от 0.0 до 1.0, где ноль это полная прозрачность, а единица наоборот — абсолютная непрозрачность. Например, для того, чтобы увидеть 50% прозрачности, надо выставить значение в 0.5. Надо иметь ввиду, что opacity распространяется на все дочерние элементы родителя. А это значит, что и текст на полупрозрачном фоне, тоже будет полупрозрачным. А это уже очень существенный недостаток, текст не так хорошо выделяется.
На скриншоте отчётливо видно, что черный текст стал таким же полупрозрачным, как и голубой фон.
CSS прозрачность в формате RGBAФормат для записи цвета RGBA , является более современной альтернативой для свойства opacity . R (red), G (green), B(blue) – значит: красный, зеленый, синий. Последняя буква A – означает альфа-канал, который и задает прозрачность. RGBA в отличии от Opacity не влияет на дочерние элементы.
Теперь давайте рассмотрим наш пример с использованием RGBA . Заменим эти строчки в стилях.
на следующую одну строку
Как вы видите значение прозрачности 0.3 совпадает у обоих методов.
Результат примера с RGBA:Второй скриншот намного лучше смотрится, чем первый.
Играясь с полупрозрачностью фона блоков, можно добиться на сайте интересных эффектов. Важно, чтобы эти полупрозрачные блоки шли поверх пестрого рисунка, например фотографии. Только в этом случае эффект будет заметен. Этот прием уже давно применялся в дизайне, ещё до появления всяких CSS3 , реализовывался он чисто в графических программах.
Если заказчик требует, чтобы верстка хорошо смотрелась и в старых версиях браузера Internet Explorer , тогда добавляйте свойство filter и не забудьте закомментировать, чтобы не пострадала валидность кода.
ВыводФормат RGBA поддерживают все современные браузеры, за исключением Internet Explorer . Ещё очень важно, что RGBA гибок, он действует только на конкретный заданный элемент, не затрагивая дочерних. Понятно, что для верстальщика это удобнее. Мой выбор однозначно в пользу формата RGBA для получения прозрачности в CSS .
Для лучшего закрепления материала и большей наглядности, предлагаю вам пройти мой видео-курс.
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Прозрачность opacity или rgba | CSS Прозрачность в CSS
Средствами CSS можно задать прозрачность двумя способами.С помощью свойства opacity или свойства rgba.
Opacity — Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.
Синтаксис
Степень прозрачности задается в диапазоне 0 (полностью прозрачен) до 1 (полностью не прозрачен).
К примеру нам надо, чтобы наша картинка была на половину прозрачной
Добавляем стили
Но к сожалению еще не все браузеры поддерживают opacity. Для полной кроссбраузерности применяем:
Так же на IE может не работать если не указаны width (ширина) или height (высота).
Свойство RGBA позволяет задать фоновый цвет с альфа-каналом. Альфа-канал определяет прозрачность элемента.
Значение 0 соответствует полной прозрачности, 1 - непрозрачности, а промежуточное значение вроде 0.5 - полупрозрачности.
Синтаксис
Допустим, нам нужен текст с прозрачным фоном.
Отличия opacity от rgba
opacity влияет на весь блок, включая текст. Создаёт новый контекст наложения. Дочерние теги не могут быть ярче родительского элемента.
rgba влияет только на конкретное свойство. В данном случает позволяет видеть сквозь фон и не делает текст прозрачным.
CSS: Прозрачность Прозрачность картинкиДля создания эффекта прозрачности в CSS используется свойство opacity.
Браузер IE8 и более ранние его версии поддерживают альтернативное свойство — , где «» может принимать значение от до, чем меньше значение, тем прозрачнее будет элемент.
Все остальные браузеры поддерживают стандартное CSS свойство, которое может принимать в качестве значения числа от до, чем меньше значение, тем прозрачнее будет элемент:
Название документа .myClass { float: left; margin-right: 5px; opacity: 0..jpg» class=»myClass»> Попробовать »
Псевдо-класс:hover позволяет изменять внешний вид элементов при наведении на них курсора мыши. Мы воспользуемся этой возможностью, чтобы изображение при наведении мыши теряло свою прозрачность:
Название документа img { float: left; margin-right: 5px; opacity: 0.4; filter: alpha(opacity=40); /*для IE8 и более ранних версий*/ } img:hover { opacity: 1..jpg»> Попробовать »
Есть два возможных способа сделать элемент прозрачным: свойство, описанное выше, и указание цвета фона в RGBA формате.
Возможно вы уже знакомы с моделью представления цвета в формате.
Свойство CSS opacity(Red, Green, Blue — красный, зеленый, синий) — цветовая система, определяющая оттенок путем смешивания красного, зеленого и синего цветов. Например, для задания желтого цвета для текста можно воспользоваться любым из следующих объявлений:
color: rgb(255,255,0); color: rgb(100%,100%,0);
Цвета, заданные с помощью, будут отличаться от шестнадцатеричных значений, используемых нами до этого тем, что позволяют использовать альфа-канал прозрачности. Это значит, что сквозь фон элемента с альфа-прозрачностью будет видно то, что располагается под ним.
Объявление цвета схоже по синтаксису со стандартными правилами. Однако, кроме всего прочего, нам потребуется объявить значение как (вместо) и задать дополнительное десятичное значение прозрачности после значения цвета в промежутке от (полная прозрачность) до (полная непрозрачность).
color: rgba(255,255,0,0.5); color: rgba(100%,100%,0,0.5);
Разница между свойством и заключается в том, что свойство применяет прозрачность ко всему элементу целиком, то есть все содержимое элемента становится прозрачным. А позволяет задать прозрачность отдельным частям элемента (например, только тексту или фону):
body { background-image: url(img.jpg); } .prim1 { width: 400px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; font-weight: bold; opacity: 0.5; filter: alpha(opacity=70); /*для IE8 и более ранних версий*/ text-align: center; } .prim2 { width: 400px; margin: 30px 50px; background-color: rgba(255,255,255,0.5); border: 1px solid black; font-weight: bold; text-align: center; } Попробовать »
Примечание: значения не поддерживаются в браузере IE8 и более ранних версиях. Для объявления резервного варианта цвета для старых браузеров, не поддерживающих значения цветов с альфа-каналами, следует указать его первым до значения: background: rgb(255,255,0); background: rgba(255,255,0,0.5);
Статьи / CSS /
Как сделать элемент прозрачным и убрать прозрачность CSS?1. Как сделать элемент прозрачным?
2. Как убрать прозрачность дочернего элемента?
3. Пример
Для того, чтобы сделать элемент прозрачным, следует использовать CSS.
CSS прозрачность – просто о важномДля стилей есть полезное свойство opacity, в котором остаётся лишь указать степень прозрачности. Где, как правило 1 или 100 — элемент не прозрачен, а 0.1 или 10 — это прозрачный элемент. Почему два значения? Потому что для IE (Internet Explorer), равно как и для других браузеров, прописываются другие свойства, и у IE прозрачность измеряется в других значениях.
Полупрозрачный элементСоответственно, чтобы сделать элемент полупрозрачным, нужно задать для opacity значение 0.5 или 50.
Код CSS
Например, Вы задали прозрачность всем пунктам меню, а при навведении как раз хотите сделать НЕ прозрачным (убрать прозрачность) , то прописываете ему следующие характеристики, где значение прозрачности равно 1 или 100:
Код CSS
filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity:1;
opacity: 1;
Не забываем указывать все 4 свойства, так как в противном случае действие будет не кроссбраузерно, то есть будет работать не во всех браузерах.
Если хотите, чтобы полупрозрачность были при наведении на изображение, то можно создать, например такой класс
Opacity:hover {
filter: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; /* для Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */
}
Создаём файл index.html
Название странички
.opacity:hover {
filter: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; /* для Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */
}
Square {
width: 100px;
height: 100px;
background: black;
}
Полупрозрачность элемента
Делаем изображение полупрозрачным при наведении!
ДемонстрацияСкачать исходники
Спасибо за внимание!
Следующая статья
Как создать div блок с прокруткой?
/* 06.07.2006 */
CSS прозрачность (css opacity, javascript opacity)Эффект прозрачности - это тема данной статьи. Если вам интересно узнать, как сделать элементы html-страницы прозрачными, используя CSS или Javascript, и как добиться кросс-браузерности (одинаковой работы в разных браузерах) с учетом браузеров Firefox, Internet Explorer, Opera, Safari, Konqueror, тогда милости просим. Вдобавок рассмотрим готовое решение постепенного изменения прозрачности с помощью javascript.
CSS opacity (CSS прозрачность) CSS opacity симбиозПод симбиозом я подразумеваю объединение разных стилей для разных браузеров в одном CSS правиле для получения нужного эффекта, т.е. для реализации кросс-браузерности.
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 */ /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
По сути, нужными являются первое и последнее правила, для IE5.5+ и браузеров понимающих CSS3 opacity, а два правила по середине явно погоды не делают, но и не очень то и мешают (сами решайте, нужны ли они вам).
Javascript opacity симбиозТеперь попробуем установить прозрачность через скрипт с учетом особенностей разных браузеров описанных выше.
Function setElementOpacity(sElemId, nOpacity) { var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) return; // Если не существует элемент с указанным id или браузер не поддерживает ни один из известных функции способов управления прозрачностью if (opacityProp=="filter") // Internet Exploder 5.5+ { nOpacity *= 100; // Если уже установлена прозрачность, то меняем её через коллекцию filters, иначе добавляем прозрачность через style.filter var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")"; // Для того чтобы не затереть другие фильтры используем "+=" } else // Другие браузеры elem.style = nOpacity; } function getOpacityProperty() { if (typeof document.body.style.opacity == "string") // CSS3 compliant (Moz 1.7+, Safari 1.2+, Opera 9) return "opacity"; else if (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 и младше, Firefox 0.8 return "MozOpacity"; else if (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 return "KhtmlOpacity"; else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ return "filter"; return false; //нет прозрачности }
Функция принимает два аргумента: sElemId - id элемента, nOpacity - вещественное число от 0.0 до 1.0 задающее прозрачность в стиле CSS3 opacity.
Думаю, что стоит пояснить часть кода функции setElementOpacity относящуюся к IE.
Var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")";
Может возникнуть вопрос, а почему бы ни устанавливать прозрачность путем присваивания (=) свойству elem.style.filter = "..."; ? Зачем используется "+=" для добавления в конец строки свойства filter ? Ответ прост, для того чтобы не "затереть" другие фильтры. Но при этом, если добавить фильтр таким образом второй раз, то он не изменит ранее установленные значения этого фильтра, а будет просто добавлен в конец строки свойства, что не корректно. Поэтому, если фильтр уже установлен, то нужно им манипулировать через коллекцию примененных к элементу фильтров: elem.filters (но учтите, если фильтр ещё не был назначен элементу, то управлять им через данную коллекцию невозможно). Доступ к элементам коллекции возможен либо по имени фильтра, либо по индексу. Однако фильтр может быть задан в двух стилях, в коротком стиле IE4, или в стиле IE5.5+, что и учтено в коде.
Плавное изменение прозрачности элементаГотовое решение. Используем библиотеку opacity.js
img {
filter:alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
// Создаем правило изменения прозрачности: задаем имя правила, начальную и конечную прозрачность, а также необязательный параметр задержки влияющий на скорость смены прозрачности
fadeOpacity.addRule("oR1", .3, 1, 30);
fadeOpacity(this.id, "oR1")
" onmouseout="fadeOpacity.back(this.id)
" src="/img/strawberry.jpg" width="100" height="80" />
fadeOpacity(this.id, "oR1")
" onmouseout="fadeOpacity.back(this.id)
" src="/img/tomato.jpg" width="82" height="100" />
fadeOpacity(this.id, "oR1")
" onmouseout="fadeOpacity.back(this.id)
" src="/img/sweet_cherry.jpg" width="98" height="97" />
Как подключать библиотеку, думаю, видно из примера выше. Теперь стоит пояснить определение правил. До того как вызывать методы плавного изменения прозрачности, нужно определить правила, по которым будет выполняться процесс: нужно определить начальную и конечную прозрачность, а также, при желании, указать параметр задержки, который влияет на скорость процесса смены прозрачности.
Правила определяются с помощью метода fadeOpacity.addRule
Синтаксис: fadeOpacity.addRule (sRuleName, nStartOpacity, nFinishOpacity, nDalay)
Аргументы:
- sRuleName - имя правила, задаётся произвольно;
- nStartOpacity и nFinishOpacity - начальная и конечная прозрачность, числа в диапазоне от 0.0 до 1.0 ;
- nDelay - задержка в миллисекундах (необязательный аргумент, по умолчанию равен 30).
Сам вызов фейдинга прозрачности делаем через методы fadeOpacity(sElemId, sRuleName), где sElemId это id элемента, а sRuleName имя правила. Для возврата прозрачности в исходное состояние используется метод fadeOpacity.back(sElemId).
:hover для простой смены прозрачностиЕщё отмечу, что для простой смены прозрачности (но не постепенного её изменения) в самый раз подходит псевдо-селектор :hover , который позволяет определить стили для элемента, в момент наведения на него мыши.
a:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
Обратите внимание, что картинка размещена внутри элемента A. Дело в том, что Internet Explorer вплоть до версии 6, понимает псевдо-селектор:hover, только применительно к ссылкам, а не к любым элементам, как положено в CSS (в IE7 положение исправлено).
Прозрачность и зазубренный текст в IEС выходом Windows XP появилось сглаживание экранных шрифтов методом ClearType , а вместе с ним и побочные эффекты в IE при использовании этого метода сглаживания. Касательно нашего случая, если применяется прозрачность к элементу с текстом при включенном методе сглаживания ClearType, то текст перестает нормально отображаться (полужирный текст - bold , например, двоится, могут так же появляться различные артефакты, например, в виде чёрточек, зазубренного текста). Для того чтобы исправить положение, для IE нужно задать фоновый цвет, CSS свойство background-color , элементу к которому применяется прозрачность. К счастью в IE7 баг устранен.
