CSS3 определяет свойство opacity для применения эффекта прозрачности к элементам страницы. Значением данного свойства является число в диапазоне от 0.0 до 1.0. При значении равном нулю элемент становится полностью прозрачным, а при значении равном единице, соответственно, совсем не прозрачным. Свойство можно применять к любым элементам страницы.
.img1 { opacity: 0.2; }
.img2 { opacity: 0.5; }
.img3 { opacity: 1.0; }
Для установки прозрачности через скрипт используем: object.style.opacity
Старые 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.
Internet Explorer начиная с версии 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".
Как сделать, чтобы работало во всех браузерах:
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 */
Javascript
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; //нет прозрачности
}