Изменение прозрачности фонового изображения css

Definition and Usage

The property sets the opacity level for an element.

The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.

opacity 0.2

opacity 0.5

opacity 1(default)

Note: When using the property to add transparency to
the background of an element, all of its child elements become transparent as
well. This can make the text inside a fully transparent element hard to read. If
you do not want to apply opacity to child elements, use RGBA color values
instead (See «More Examples» below).

Default value:	1
Inherited:	no
Animatable:	yes, see individual properties. Read about animatable Try it
Version:	CSS3
JavaScript syntax:	object.style.opacity=»0.5″ Try it

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

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

Пример (задана прозрачность 0.2, 0.5 и 1.0):

.img1 { opacity: 0.2; }
.img2 { opacity: 0.5; }
.img3 { opacity: 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.

Причиной по которой 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». Описание всех параметров смотрите на странице описания фильтра.

CSS Opacity in Firefox, Safari, Chrome, and Opera

Here is the simplest and most up to date syntax for CSS opacity in all current browsers except Internet Explorer:

.myElement {
  opacity: .7;
}

The syntax above will set an element to 70% opacity (or 30% transparency). A setting of would make the element opaque, whereas a setting of would make the element completely invisible. This is easy to remember if you keep in mind that the word “opacity” comes from the word “opaque”, which is the opposite of “transparent”. The lower the opacity (or “opaqueness”), the closer you’ll be to transparency.

The property can be set to two decimal places, so a value of “.01” would be different from a value of “.02”, although the visible difference would be very hard to notice. Generally, it’s best to stick to one decimal place, using values like “.3” or “.7”.

Использование свойства CSS opacity для фона

Задать непрозрачность фона можно двумя способами. В первом указывается значение opacity, как мы делали в предыдущих примерах:

div {
  opacity: 0.5;
}

Во втором способе необходимо указать значение альфа-канала в RGBA (красный, зеленый, синий, альфа) в объявлении цвета фона. Это делается следующим образом:

div {
  background: rgba(0, 0, 0, 0.5);
}

Изменяя значения R, G и B, можно получить прозрачность background CSS любого цвета. Аналогично можно получить непрозрачные дочерние элементы внутри прозрачных родительских элементов. Как правило, значение непрозрачности родительского элемента выше, чем у дочерних. Тем не менее, с помощью прозрачного фона можно сделать дочерние видимыми, сохраняя при этом прозрачность их контейнера.

CSS-свойства, определяющие переходы

CSS переходы контролируются свойством . Это лучший способ их настроить, позволяет избежать длинных свойств и их несоответствий, которые могут сделать отладку CSS долгой.

Можно контролировать определённые параметры перехода следующими подсвойствами:

(Заметьте, что циклы переходов бесконечны только для наших примеров; CSS s только анимируют смену свойства

Если вам нужно визуализировать этот цикл, обратите внимание на свойство .)

(en-US)

Указывает имя или имена свойств, чьи переходы должны анимироваться. Только свойства, указанные здесь, анимируются в переходах; изменение других свойств будет происходить обычным образом.

Определяет время происхождения перехода. Можно указать время анимирования всех свойств перехода сразу или для каждого свойства в отдельности.

(en-US)

Определяет функцию, указывающую, как вычисляются промежуточные значения свойств. Вы также можете выбрать ослабления от функции замедления Шпаргалка.Большинство функций времени может быть определено графиком соответствующей функции, образующей четырьмя точками кривую Безье. Также можете выбрать функцию отсюда Easing Functions Cheat Sheet.

(en-US)

Определяет как много должно пройти времени, перед тем как начнётся переход.

Короткая запись синтаксиса:

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients
Conic Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS MaskingCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Тени

Спецификация CSS3 определяет два новых типа теней: блочные тени (box shadows) и текстовые тени (text shadows). Блочные тени обычно более полезны и имеют более высокий уровень поддержки, в то время как текстовые тени не работают ни в одной из версий Internet Explorer. Блочную тень можно использовать для создания прямоугольной тени позади любого блока элемента <div> (но не забудьте при этом о рамке, чтобы он продолжал выглядеть как блок). Тени могут даже следовать контурам блоков со скругленными углами:

Рассматриваемые тени создаются посредством свойств box-shadow и text-shadow. Далее приведен пример создания базовой блочной тени:

Первые два значения свойства box-shadow устанавливают горизонтальное и вертикальное смещения тени от исходного объекта. Положительные значения смещают тень вниз и вправо, отрицательные — вверх и влево. Следующее значение определяет размер размытия (blur, в данном примере 10 пикселов), которое увеличивает расплывчатость тени. Последнее значение определяет цвет тени. Если под блоком находится какое-либо содержимое, подумайте об использовании функции rgba(), чтобы сделать тень полупрозрачной.

Для более тонкой настройки тени в свойство box-shadow можно добавить два значения. Чтобы установить ширину (spread) тени — подсвойство, которое расширяет тень, утолщая ее сплошную часть между размытыми краями, добавляется значение между значениями размытия и цвета:

А чтобы создать тень, отражающуюся не наружу, а внутрь элемента, в конце списка значений добавляется значение inset. Лучший эффект достигается, когда тень располагается непосредственно поверх элемента, без горизонтального или вертикального смещения:

Свойство text-shadow требует подобного набора значений, но в другом порядке. Сначала указывается цвет, за ним следует горизонтальное и вертикальное смещения, а потом размытие:

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, а два правила по середине явно погоды не делают, но и не очень то и мешают (сами решайте, нужны ли они вам).

More Examples

Example

The opacity property adds transparency to the background of an element, and
to all of its child elements as well. This makes the text inside a transparent element hard to read:

div.first {  opacity: 0.1;}div.second { 
opacity: 0.3;}div.third {  opacity: 0.6;
}

Example

To not apply opacity to child elements (like in the example above) use RGBA color values
instead.
The following example sets the opacity for the background color, but not for the text:

div.first {  background: rgba(76, 175, 80, 0.1);}div.second {  background: rgba(76, 175, 80, 0.3);
}div.third {  background: rgba(76, 175, 80,
0.6);}

Try it Yourself »

Tip: Learn more about RGBA Colors in CSS RGBA Colors.

Example

How to use JavaScript to change the opacity for an element:

function myFunction(x) {// Return the text of the selected option  var opacity = x.options.text;  var el = document.getElementById(«p1»);
  if (el.style.opacity !== undefined) {    el.style.opacity = opacity;  } else {
    alert(«Your browser doesn’t support this example!»);  }
}

Прозрачность фона

Есть два возможных способа сделать элемент прозрачным: свойство , описанное выше, и указание цвета фона в RGBA формате.

Возможно вы уже знакомы с моделью представления цвета в формате . (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);

Effects on Validation of CSS

If you’re using any opacity settings in your CSS, your CSS code will not validate according to current W3C standards. Many developers are not as concerned about CSS validation as they are about HTML validation, but it’s something to keep in mind. This can be partially resolved for Microsoft-specific styles by placing them in separate stylesheets using conditional comments, but other browsers’ opacity styles (specifically the property) would still be in your main stylesheet, causing validation errors.

Update: I neglected to mention that you can get your stylesheet to validate if you set the validator options to use CSS3. You can even do this through the “referrer” link, like this (thanks to for pointing this out):

<a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3">Valid CSS</a>

The CSS opacity property is part of the CSS Color Module Level 3 (which is part of CSS3), and is (as of this writing) in the phase on the specification track, so although it is well supported, there is still some time before it is an official standard.

I hope I’ve covered the most important facts and code for cross-browser CSS opacity. If I’ve left out any important information, or made any errors, feel free to comment and I’ll gladly make any corrections or additions.

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients
Conic Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS MaskingCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Alternative solution: add an overlay with reduced opacity and background-color on top of the background image.

Another solution is instead of changing the opacity of the background image, you add an overlay with a semi-transparent background color on top of the background image.

The HTML markup will be the same as the previous solution. In the CSS, you can set the background-image directly in the parent element, with no opacity change.

The pseudo-element of the parent will then contain the semi-transparent background-color.

This is accomplished by setting the  property using the , where the first three characters are the RGB color numbers, and the last number is the alpha or transparency setting. We’re using  for the RGB color, which translates to black.

An alpha value can range from  (0% opacity) to  (100% opacity). So our value of will result in an overlay of 25% opacity.

Here’s what that will look like in the code:

The result will look like this:

And here’s the Codepen for this overlay solution!

Both solutions have a very similar-looking result. The first solution has a background image set at 75% opacity. And the second solution adds a black overlay at 25% opacity. So they’re not quite the same, but they are similar.

The overlay solution is also handy if you want to add a toned color to the background image. Here’s what that would look like if we set the overlay  to :

RGBA Colors

RGBA color values are an extension of RGB color values with an alpha channel — which specifies the opacity
for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0
(fully transparent) and 1.0 (fully opaque).

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

The following example defines different RGBA colors:

Example

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red
with opacity */#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue
with opacity */

Метод 1: Изображения и абсолютное позиционирование

Первый подход будет основан на двух элементах (как можно понять из названия). Один из них – «обертка», которая обеспечивает точку отсчета с помощью position: relative. Второй – это элемент img, который появляется за контентом с помощью position: absolute и контекста наложения.

Разметка, написанная с применением этого подхода, может выглядеть так:

<div class="demo-wrap">
  <img
    class="demo-bg"
    src="https://your-image"
    alt=""
  >
  <div class="demo-content">
    <h1>Hello World!</h1>
  </div>
</div>

Соответствующие CSS-стили будут выглядеть так:

.demo-wrap {
  overflow: hidden;
  position: relative;
}

.demo-bg {
  opacity: 0.6;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}

.demo-content {
  position: relative;
}

В итоге текст «Hello World!» будет наложен поверх изображения.

Родительский demo-wrap <div> устанавливает блок, содержащий абсолютное позиционирование. Для demo-bg <img> установлено значение position: absolute и присвоено свойство opacity . Для demo-content <div> установлено значение position: relative. Из-за организации разметки он имеет более высокий контекст наложения, чем demo-bg. Также для более точного управления контекстом наложения можно использовать z-index.

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

Transparency using RGBA

If you do not want to apply opacity to child elements, like in our example above, use RGBA color values.
The following example sets the opacity for the background color and not the text:

100% opacity

60% opacity

30% opacity

10% opacity

You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB,
you can use an RGB color value with an alpha channel (RGBA) — which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The
alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Tip: You will learn more about RGBA Colors in our CSS Colors Chapter.

HSL Colors

HSL stands for Hue, Saturation and Lightness.

An HSL color value is specified with: hsl(hue, saturation, lightness).

1. Hue is a degree on the color wheel (from 0 to 360):
   • 0 (or 360) is red
   • 120 is green
   • 240 is blue
2. Saturation is a percentage value: 100% is the full color.
3. Lightness is also a percentage; 0% is dark (black) and 100% is white.

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

The following example defines different HSL colors:

Example

#p1 {background-color: hsl(120, 100%, 50%);}  /* green */#p2 {background-color: hsl(120, 100%, 75%);}  /* light green */#p3 {background-color: hsl(120, 100%, 25%);}  /* dark
green */#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */

Техническая сторона вопроса: задаем прозрачность фона

Одним из самых важных в верстке (и поэтому распространенных) является вопрос о том, как задать прозрачность фона в CSS. Ничего сложного здесь нет.

Код элемента, с которым ведется работа, должен выглядеть следующим образом (в скобках указаны варианты, которые срабатывают в разных браузерах):

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/ 
 -moz-opacity: 0.5; /- Mozi11a 1.6 m amme */ 
 -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
 opacity: 0.5; /* C553 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */

При этом надо помнить, что заданная элементу прозрачность впоследствии наследуется дочерними элементами. То есть, если внутри фона есть картинка, текст или что-то еще – оно автоматически изменит степень прозрачности. Это не всегда допустимо.

Поэтому следует знать о таком варианте работы с прозрачностью (возьмем в качестве примера ситуацию, когда блок меню на прозрачном фоне должен быть непрозрачным).

Исходный код:

<div class="fon"›
  <div class="prozrachnost"›</div>
  <div class="menu"›</div>
  </div>

Видоизменяем код на такой:

.prozrachnost {
 opacity:0.5;
 filter:alpha(opacity=50);
 -moz-opacity:O.S;
 background-color:#000000; 
width:340px; 
height:1500px; 
position: absolute; 
top:0px; 
left:0px; 
z-index:-1; 
}

Задача решена. Такой метод можно использовать в тех случаях, когда нужно сделать непрозрачными те элементы, которые находятся внутри кода.

Техническая сторона вопроса: задаем прозрачность блока

Если прозрачность фона уже задана, то прозрачность блока, расположенного внутри него, в CSS задается автоматически. Об этом говорилось выше.

Если же нужно, чтобы дочерний блок не наследовал прозрачность родительского – все обстоит сложнее! Решить данный вопрос можно следующим образом:

HTML код:

<div id="text">A я нет!</div> 
 <div id="box">Я прозрачный!</div>

CSS стили:

body {
 margin: 0; 
padding: 0; 
background: #66CCFF; 
font-size: 20px; 
}
#box { 
margin: 20px; 
background: #FFFFFF; 
padding: 20px; 
width: 300px; 
height: 70px; 
z-index: 0; 
filter:alpha(opacity=50); 
-moz-opacity:0.5; 
opacity: 0.5; 
}

#text { 
background: #FFFFFF; 
width: 150px; 
height: 30px; 
padding: l0px; 
z-index: 10; 
position: absolute; 
left: 70px; 
top: 70px;
}

Сущность данного метода состоит в том, что блок, который надо сделать непрозрачным, не является на самом деле дочерним. Поэтому его прозрачность будет независимой величиной.

Javascript opacity симбиоз

Теперь попробуем установить прозрачность через скрипт с учетом особенностей разных браузеров описанных выше.

function setElementOpacity(sElemId, nOpacity)
{
  var opacityProp = getOpacityProperty();
  var elem = document.getElementById(sElemId);
  // Если не существует элемент с указанным id или браузер 
  //не поддерживает ни один из известных функции способов управления прозрачностью
  if (!elem || !opacityProp) return; 
  
  // Internet Exploder 5.5+
  if (opacityProp=="filter")  
  {
    nOpacity *= 100;
	
    // Если уже установлена прозрачность, то меняем её через коллекцию filters, иначе добавляем прозрачность через style.filter
    var oAlpha = elem.filters || 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 (+);/)>=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 || elem.filters.alpha;

if (oAlpha) oAlpha.opacity = nOpacity;
else {
  elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")";
}

Может возникнуть вопрос, а почему бы ни устанавливать прозрачность путем присваивания (=) свойству
elem.style.filter = ‘…’; ? Зачем используется «+=» для добавления в конец строки свойства filter?

Ответ прост, для того чтобы не «затереть» другие фильтры. Но при этом, если добавить фильтр таким образом второй раз, то он не изменит ранее установленные значения этого фильтра, а будет просто добавлен в конец строки свойства, что не корректно. Поэтому, если фильтр уже установлен, то нужно им манипулировать через коллекцию примененных к элементу фильтров: (но учтите, если фильтр ещё не был назначен элементу, то управлять им через данную коллекцию невозможно). Доступ к элементам коллекции возможен либо по имени фильтра, либо по индексу. Однако фильтр может быть задан в двух стилях, в коротком стиле IE4, или в стиле IE5.5+, что и учтено в коде.

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

С выходом Windows XP появилось сглаживание экранных шрифтов методом ClearType, а вместе с ним и побочные эффекты в IE при использовании этого метода сглаживания. Касательно нашего случая, если применяется прозрачность к элементу с текстом при включенном методе сглаживания ClearType, то текст перестает нормально отображаться (полужирный текст — bold, например, двоится, могут так же появляться различные артефакты, например, в виде чёрточек, зазубренного текста). Для того чтобы исправить положение, для IE нужно задать фоновый цвет, CSS свойство background-color, элементу к которому применяется прозрачность. К счастью в IE7 баг устранен.

Активность при наведении

Так как CSS-прозрачность чаще всего используется как оформление для элементов с гиперссылками, то активность при наведении на них становится одной из первостепенных задач. В качестве примера можно рассмотреть тот же прямоугольник. Допустим, необходимо, чтобы при наведении на блок прозрачность менялась с 0 до значения 0.5. Для получения такой возможности понадобится всего лишь занести уже имеющийся стиль, отвечающий за прозрачность, под дополнительный CSS-параметр hover. Данным свойством пользуются и для добавления таких эффектов, как изменение цвета и формы объектов при наведении

Это позволяет сделать необходимые области визуально активными, привлекая внимание посетителей к ссылкам или контенту

Use a Lower Opacity CSS Pseudo Element to Create a Colored Background Layer

Let’s suppose you have the following elements; a content child element nested inside a parent element:

<div id="parent">
  <div id="child">
    Text
  </div>
</div>

With a structure like that, you can create a background layer (having no content) via CSS pseudo elements like so:

#parent::after { content: ''; }

Now you can make the background layer the same size as the parent and position it relative to the parent like so:

#parent { height: 45px; position: relative; }
#parent::after {
	content: ''; 
	width: 100%; 
	height: 100%;
	background-color: pink; 
	opacity: 0.5; 
	position: absolute; 
	top: 0; 
	left: 0;
	z-index: -1;
}

You should now see a pink colored background layer with an opacity of 50% that only applies to the background color and not the content.

Following is a quick explanation of how the generated content (our background layer) is styled:

• To generate empty/invisible content we can simply set the property’s value to an empty string or a space character.
• Setting and to ensures the generated content is of the same size as the parent element.
• Setting a lower makes the background layer transparent.
• on the parent element and on the generated content ensures the generated content is positioned relative to the parent.
• Setting and ensures the generated content is positioned to the top left edge of the parent element.
• Setting a negative value ensures the generated content recedes to the background and all child element content appears above it.

If the parent element has a background color of its own, then you can set a positive value on the generated content (the background layer) and a higher z-index value on the child element along with relative positioning like so:

#parent { height: 45px; background-color: yellow; position: relative; }
#parent::after {
	content: ''; 
	width: 100%; 
	height: 100%; 
	background-color: pink; 
	opacity: 0.5; 
	position: absolute; 
	top: 0; 
	left: 0; 
	z-index: 1;
}
#child {position: relative; z-index: 2;}

Определение и использование

Свойство задает уровень непрозрачности для элемента.

Уровень непрозрачности описывает уровень прозрачности, где 1 не является прозрачным вообще, 0.5 является 50% прозрачным, а 0 является полностью прозрачным.

opacity 0.2

opacity 0.5

opacity 1(default)

Примечание: При использовании свойства для добавления прозрачности к фону элемента все его дочерние элементы также становятся прозрачными. Это может сделать текст, внутри полностью прозрачного элемента, трудно читаемым. Если вы не хотите применять непрозрачность к дочерним элементам, используйте вместо этого значения цвета RGBA (см. «Дополнительные примеры» ниже).

Значение по умолчанию:	1
Унаследованный:	нет
Анимируемый:	да, см. раздел отдельные свойства. Прочитайте о animatable Попробовать
Версия:	CSS3
JavaScript синтаксис:	object.style.opacity=»0.5″ Попробовать

Определение завершения перехода

Есть событие, срабатывающее, когда переход завершён. Во всех браузерах, совместимых со стандартами, есть событие , в WebKit есть . Смотрите таблицу поддержки браузерами для дополнительной информации. У  есть 2 свойства:

Строка, показывающая изменение какого свойства завершено.

Число с точкой, какое количество времени переход выполнялся, до того как запустилось событие. Это значение не равно свойству  (en-US).

Как обычно, используйте метод , чтобы следить за этим событием:

Замечание: Событие  не произойдёт, когда переход был прерван до его завершения, например, если установили или значение анимируемого свойства изменилось

Применение для изображений

В том случае, если описанный выше процесс понятен, добавить при помощи CSS прозрачность для изображений не составит никакого труда. Здесь даже не потребуется вносить изменения в сам код стиля. Его можно оставит прежним. Поработать придется только при верстке картинок в сам html-документ. Если в предыдущих случаях для вставки элемента использовались теги «div», то здесь попросту потребуется заменить их на «img», соответствующие данному типу контента. Стиль же для изображений подключаем тот же, что и для блоков. Конечно, применяя CSS, описанный в начале статьи, нужно будет изменить параметры высоты, ширины и краев для гармоничного вида вставленной картинки.

Window

Window Location
hash
host
hostname
href
origin
pathname
port
protocol
search
assign()
reload()
replace()

Window Navigator
appCodeName
appName
appVersion
cookieEnabled
geolocation
language
onLine
platform
product
userAgent
javaEnabled()
taintEnabled()

Window Screen
availHeight
availWidth
colorDepth
height
pixelDepth
width

Window Methods
closed
console
defaultStatus
document
frameElement
frames
history
innerHeight
innerWidth
length
localStorage
location
name
navigator
opener
outerHeight
outerWidth
pageXOffset
pageYOffset
parent
screen
screenLeft
screenTop
screenX
screenY
sessionStorage
self
status
top
alert()
atob()
blur()
btoa()
clearInterval()
clearTimeout()
close()
confirm()
focus()
getComputedStyle()
matchMedia()
moveBy()
moveTo()
open()
print()
prompt()
resizeBy()
resizeTo()
scrollBy()
scrollTo()
setInterval()
setTimeout()
stop()

:hover для простой смены прозрачности

Ещё отмечу, что для простой смены прозрачности (но не постепенного её изменения) в самый раз подходит псевдо-селектор :hover, который позволяет определить стили для элемента, в момент наведения на него мыши.

<style type="text/css">
a:hover img {
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
  -moz-opacity: 0.3;
  -khtml-opacity: 0.3;
  opacity: 0.3;
}
</style>

<a href="javascript:void(0)">
<img src="/images/articles/strawberry.jpg" width="100" height="80" />
</a>

Обратите внимание, что картинка размещена внутри элемента A. Дело в том, что Internet Explorer вплоть до версии 6, понимает псевдо-селектор :hover, только применительно к ссылкам, а не к любым элементам, как положено в CSS (в IE7 положение исправлено)

Управление непрозрачностью родительских и дочерних элементов

Непрозрачность применяется ко всему элементу равномерно. Непрозрачность дочерних элементов также зависит от значения свойства его родителей. Для достижения различных уровней прозрачности нужно применять разные значения непрозрачности для родительских и дочерних элементов. Например:

#parent { opacity: 0.8 }
#child { opacity: 0.5 }

Следующие примеры иллюстрируют, как дочерние элементы влияют на непрозрачность их родителей:

В первом примере для обоих полей задана непрозрачность 1. Во втором примере родительское поле (черное) имеет непрозрачность 0.8, а дочернее (оранжевое) —1. В третьем родительский элемент имеет непрозрачность 0.8, а дочерний – 0.5

Обратите внимание на разницу в цветовом тоне (прозрачности) оранжевого поля во всех трех примерах