Опубликовано автор в категориях Верстальщику.

Во многих дизайнерских решениях для создания прозрачности на сайтах используются изображения в формате .png24(или более новый формат .png32 ), при этом верстальщикам приходится применять pngfix или специальные фильтры для подобных изображений, чтобы они корректно выглядели в IE6 и более поздних браузерах от Microsoft.Однако, по-моему, очень часто верстальщики не уделяют должного внимания свойству opacity, которое во многих случаях помогает решить нужные задачи, не прибегая к использованию .png24 (или .png32).

Тем более, если к свойству opacity добавить javascript, можно получить весьма интересные эффекты.

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

W3C в своей рекомендации CSS3 определяет свойство opacity для применения эффекта прозрачности к элементам страницы. Значением данного свойства является число в диапазоне от 0.0 до 1.0. При значении равном нулю элемент становится полностью прозрачным, а при значении равном единице, соответственно, совсем не прозрачным. Свойство можно применять к любым элементам страницы.

Браузеры поддерживающие CSS3 opacity

Понимают CSS3 свойство opacity следующие браузеры: Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9.

Для установки прозрачности через скрипт используем: object.style.opacity

Mozilla 1.6 и ниже, Firefox 0.8

Старые Mozilla и Firefox 0.8 используют своё название данного свойства: -moz-opacity

Для установки прозрачности через скрипт используем: object.style.MozOpacity

Safari 1.1, Konqueror 3.1

Данные товарищи, построенные на движке KHTML, используют для управления прозрачностью свойство: -khtml-opacity

Для установки прозрачности через скрипт используем: object.style.KhtmlOpacity

Однако, имейте ввиду, что данное свойство доступно лишь в данных версиях этих браузеров. Safari с версии 1.2 использует CSS3 opacity, но при этом Konqueror старше версии 3.1, перестав поддерживать -khtml-opacity, не ввел поддержку CSS3 opacity.

В январе 2003 года корпорация Apple представила новый браузер для Mac OS X, основанный на движке KHTML, Safari. Благодаря лицензии, на условиях которой распространяется KHTML, все изменения, вносимые в него разработчиками Apple, публикуются в виде патчей, которые, после пересмотра, добавляются в основную ветку KHTML.

Причиной по которой Konqueror утратил возможность реализации эффекта прозрачности как раз и заключается во внесение в ядро KHTML патчей от Safari, т.к. Safari использует возможности присутствующие в Mac OS X, но которых нет в KDE.

Конечно рано или поздно эта ситуация будет исправлена, но на данный момент в последней версии 3.5 ситуация остается прежней.

Internet Explorer 5.5+

Данный браузер, начиная с версии 5.5 и включая последнюю на сегодняшний день версию Internet Explorer 7, реализует прозрачность через Alpha DirectX фильтр. Стоит отметить, что данный фильтр использует значение прозрачности в диапазоне от 0 до 100 (а не от 0.0 до 1.0). Так же отмечу, что фильтр можно применять лишь к элементу с установленным свойством height, или width, или position со значением absolute, или writingMode со значением tb-rl, или с contentEditable установленным в true.

Пример (устанавливаем прозрачность на половину):
.img1 { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); }/* синтаксис IE5.5+ (является предпочтительным) */
.img2 { filter: alpha(opacity=50); } /* синтаксис IE4 */

Для установки прозрачности через скрипт используем: object.style.filter = «progid:DXImageTransform.Microsoft.Alpha(строка параметров)». Для получения прозрачности аналогичной прозрачности W3C используем в качестве строки параметров значение «opacity=число от 0 до 100». Описание всех параметров смотрите на странице описания фильтра. Так же очень важно знать следующее: с выходом Windows XP появилось сглаживание экранных шрифтов методом ClearType, а вместе с ним и побочные эффекты в IE при использовании этого метода сглаживания; в нашем случае, если применяется прозрачность к элементу с текстом при включенном методе сглаживания ClearType, то текст перестает нормально отображаться (полужирный текст — bold, например, двоится, могут так же появляться различные артефакты, например в виде чёрточек). Для того чтобы исправить положение, для IE нужно задать фоновый цвет, CSS свойство background-color, элементу к которому применяется прозрачность. К счастью в IE7 баг устранен.

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 */
opacity: 0.5; /* 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[opacityProp] = 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.]+);/)[1]>=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+, что и учтено в коде.

Прозрачность и зазубренный текст в IE

Напоследок хочу сказать, применяя прозрачность к тексту большого размера в Internet Explorer, вы столкнетесь с тем, что этот текст будет зазубренным. Для устранения этого неприятного «спецэффекта» следует задать фон текстовому элементу, к которому применяется прозрачность, установив CSS cвойство background-color.

В данной статье отсутствуют визуальные примеры применяемых эффектов. Ознакомится с примерами вы можете на сайте-источнике статьи профессиональная видеосъемка

Теги:

3 комментария к записи “Простая и полезная прозрачность (CSS прозрачность)”

  1. freelancer

    Спасибо за статью то что искал, единственное что так это проблема в опере (9.22) так и не заработало нормально

    Ответить
  2. Hiway

    Странно, проверял на 9.25-9.26 — работает сто процентов без каких-либо скриптов. Вообще это свойство (opacity)относится к CSS3 и в обычном виде opacity: 0.5; /* CSS3 — Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */ должно поддерживаться новыми браузерами на ура. Вот очень полезная и понятная информация по поддержке различных версий CSS и не только оперой http://operafan.net/component/option,com_openwiki/Itemid,99/id,docs:webspecs/

    Кстати, там по поводу прозрачности, вот цитирую:
    «Предлагаемые свойства CSS 3, поддерживаемые Opera

    Примите во внимание, что эти своства находятся в ранней стадии разработки, их могут изменить или удалить из спецификации в любое время. Используйте их в качестве эксперимента.

    *
    Частичная поддержка Media Queries
    *
    ‘content’ применимо во всех элементах, не применимо только для псевдоэлементов ‘:before’ и ‘:after’
    *
    ‘box-sizing’
    *
    ‘opacity’

    «

    Ответить

Оставить комментарий

  • (не будет показан)