5 примеров, которые помогут понять, как работает css opacity

Как убрать прозрачность дочернего элемента?

Например, Вы задали прозрачность всем пунктам меню, а при навведении как раз хотите сделать НЕ прозрачным (убрать прозрачность), то прописываете ему следующие характеристики, где значение прозрачности равно 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 */ }

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !important

Цвет в CSS

Последнее обновление: 21.04.2016

В CSS широкое распространение находит использование цветов. Чтобы установить цвет текста, фона или границы, нам надо указать цвет.

Например, определим красный цвет для фона элемента div:

div{
	background-color: red;
}

В CSS есть несколько различных свойств, которые в качестве значения требует определенный цвет. Например, за установку цвета текста отвечает
свойство color, за установку фона элемента — свойство background-color, а за установку цвета границы —
border-color.

Существует несколько различных способов определения цвета текста.

Шестнадцатеричного значение. Оно состоит из отдельных частей, которые кодируют в шестнадцатеричной системе
значения для красного, зеленого и синего цветов.
Например, #1C4463. Здесь первые два символа представляю значение красной компоненты цвета, далее
— значение зеленой компоненты цвета и — значение уровня синего цвета. Финальный цвет, который мы видим на веб-странице,
образуется с помощью смешивания этих значений.
Если каждое из трех двухзначных чисел содержит по два одинаковых символа, то их можно сократить до одного. Например,
можно сократить до , или, к примеру, можно сократить до

При этом
не столь важно, в каком регистре будут символы. Значение RGB

Значение RGB также представляет последовательно набор значений для красного, зеленого и синего цветов
(Red — красный, Green — зеленый, Blue — синий)

Значение RGB. Значение RGB также представляет последовательно набор значений для красного, зеленого и синего цветов
(Red — красный, Green — зеленый, Blue — синий)

Значение каждого цвета кодируется тремя числами, которые могут представлять либо
процентные соотношения (0–100%), либо число от 0 до 255.
Например
background-color: rgb(100%,100%,100%);
Здесь каждый цвет имеет значение .
И в итоге при смешивании этих значений будет создаваться белый цвет. А при значениях в 0% будет генерироваться черный цвет:
background-color: rgb(0%, 0%, 0%);
Между 0 и 100% будут находиться все остальные оттенки.
Но, как правило, чаще применяются значения из диапазона от 0 до 255. Например,
background-color: rgb(28, 68, 99);

Значение RGBA. Это тоже самое значение RGB плюс компонент прозрачности (Alpha). Компонент прозрачности
имеет значение от 0 (полностью прозрачный) до 1 (не прозрачный). Например:
background-color: rgba(28, 68, 99, .6);

Значение HSL. HSL представляет аббривиатуру: Hue — тон, Saturation — насыщенность и Lightness — осветленность.
HSL задает три значения. Первое значение Hue угол в круге оттенков — значение в градусах от 0 до 360.
Например, красный — 0 (или 360 при полном обороте круга). Каждый цвет занимает примерно 51°.
Второе значение — Saturation — представляет насыщенность, то указывает, насколько чистым является цвет. Насыщенность определяется в
процентах от 0 (полное отсутствие насыщенности) до 100% (яркий, насыщенный цвет).
Третье значение — Lightness — определяет осветленность и указывается в процентах от 0 (полностью черный) до 100 (полностью белый).
Для получения чистого цвет применяется значение 50 %.
Например:

background-color: hsl(206, 56%, 25%);

Данный цвет является эквивалентом значений и

Значение HSLA. Аналогично RGBA здесь к HSL добавляется компонента прозрачности в виде значения от 0 (полностью прозрачный) до 1 (не прозрачный). Например:
background-color: hsl(206, 56%, 25%, .6);

Строковые значения. Существует ряд константных строковых значений, например, red (для красного цвета) или green
(для зеленого цвета). К примеру,
color: red;
является эквивалентом
color: #ff0000;

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

Ряд настроек цвета позволяют установить значение для альфа-компоненты, которая отвечает за прозрачность. Но также в CSS есть специальное свойство,
которое позволяет установить прозрачность элементов — свойство opacity. В качестве значения оно принимает число от 0 (полностью прозрачный)
до 1 (не прозрачный):

div{
	width: 100px;
	height: 100px;
	
	background-color: red;
	opacity: 0.4;
}

НазадВперед

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

Одним из самых важных в верстке (и поэтому распространенных) является вопрос о том, как задать прозрачность фона в 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;
}

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

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

HSLA Colors

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

An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha), where the
alpha parameter defines the opacity. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

The following example defines different HSLA colors:

Example

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

Sumário

A propriedade CSS opacity especifica a transparência de um elemento, isto é, o grau no qual o background atrás do elemento é sobreposto.

O valor aplica-se ao elemento como um todo, incluindo seu conteúdo, apesar de o valor não ser herdado por elementos filhos. Assim, um elemento e seus elementos filhos têm todos a mesma opacidade relativa ao background do elemento, mesmo se o elemento e seus elementos filhos tiverem opacidades diferentes entre si.

Se você não quer aplicar a opacidade ao elemento filho — use isto:

Usando essa propriedade com um valor diferente de 1, o elemento é colocado em um novo contexto de empilhamento.

Initial value
Aplica-se a all elements
Inherited não
Computed value the specified value, clipped in the range
Animation type a

RGBA

Обычно по дизайну полупрозрачным должен быть только фон элемента, а текст непрозрачным для сохранения его читабельности. Свойство opacity
здесь не подходит, потому что текст внутри элемента также будет частично прозрачным. Лучше всего использовать формат RGBA, частью которого является альфа-канал или иными словами значение прозрачности. В качестве значения пишется rgba
, затем в скобках через запятую перечисляются значения красной, синей и зелёной компоненты цвета. Последним идёт прозрачность, которая задаётся от 0 до 1 (рис. 1), при этом 0 означает полную прозрачность, а 1 непрозрачность цвета..

Рис. 1. Синтаксис применения rgba

В примере 2 показано применение формата RGBA для создания полупрозрачного фона.

Пример 2. Полупрозрачный фон

HTML5
CSS3
IE 9+
Cr
Op
Sa
Fx

rgbaГоббс одним из первых осветил эту проблему с позиций психологии.

Результат данного примера показан на рис. 2. Значение непрозрачности для фона установлено 90%.

Рис. 2. Полупрозрачный фон и непрозрачный текст

Свойство CSS RGBa позволяет задать фоновый цвет с альфа-каналом (т.е. заливать блоки полупрозрачным цветом).

Разумеется, в CSS есть свойство opacity, однако основной его недостаток: все дочерние элементы внутри прозрачного блока будут также наследовать его прозрачность.

Чаще всего используют заливку фона элемента одно-пиксельным PNG24 и фиксят прозрачность в IE6, или ещё фон делают прозрачным через css opacity. Текст позиционируют отдельно уже в другом элементе, но это, на мой взгляд, не совсем удобно…

С помощью RGBa
решение выглядит следующим образом:

1. Допустим, нам нужен синий фон с прозрачностью 50%.

А не поддерживать его будут IE6–8, Opera 9.x, Mozilla Firefox 2.x

2. Для IE можно постараться и сделать более изящно:

.element{

background
:
transparent
;

filter:progid
:DXImageTransform
.Microsoft
.gradient(startColorstr=
#990000ff
,

endColorstr=
#990000ff
)
;

zoom:
1
;

}

Примечание: Цвет в фильтре задается 8 числами. Первые 2 числа это степень прозрачности: FF — полностью непрозрачный, 00 — прозрачный. Следующие 6 чисел привычное обозначение HTML-цвета.

Использование RGBa не ограничивается только фоновым цветом у блоков…

В CSS есть три способа изменить прозрачность элемента:с
помощью свойства opacity ,с
помощью функции rgba() ,с
помощью функции hsla() .

1. Свойство opacity

Свойство opacity позволяет сделать любой элемент веб-страницы частично или полностью прозрачным. Данное свойство изменяет прозрачность элементов, для которых установлено фоновое изображение (картинка) или задан фон с помощью цвета или градиента. Если элемент, для которого применено свойство opacity , содержит внутри себя другие элементы, то они также изменят свою прозрачность.
Свойство opacity принимает значения в диапазоне от 0 (полностью прозрачный) до 1 (непрозрачный), например:

H1 {color: #CD6829;}
div {
background: #CDD6DB;
opacity: .3;
}
Рис. 1. Прозрачность элементов с помощью opacity

2. Функция rgba()

Цветовая модель RGBA создает цветовой оттенок путем смешивания в необходимых пропорциях красного (Red)
, зеленого (Green)
и синего (Blue)
цветов, а альфа-канал (Alpha)
отвечает за степень прозрачности цвета. В отличие от свойства opacity , для блока, содержащего другие элементы, функция rgba() изменит прозрачность только блока.

3. Функция hsla()

Функция hsla() , параметры которой означают тон (Hue)
, насыщенность (Saturation)
, яркость (Lightness)
и альфа-канал (Alpha)
, также позволяет задать полупрозрачный цвет.

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

0/360° — красный цвет

60° — желтый цвет

120° — зеленый цвет

180° — голубой цвет

240° — синий цвет

270° — фиолетовый цвет

300° — пурпурный цвет
.

Чтобы получить черный цвет, нужно присвоить показателям тона, насыщенности и яркости нулевое значение — hsla(0, 0%, 0%, 1) . Белый цвет получается при 100%-ном значении яркости hsla(0, 0%, 100%, 1) , а серый цвет — при нулевом значении насыщенности hsla(0, 0%, 50%, 1) .

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

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

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

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

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

Примеры

В следующем примере показано, как создать форму, которая отображается с уровнем непрозрачности 75%.The following example demonstrates how to create a form that is displayed with an opacity level of 75 percent. Он создает новую форму, которая располагается в центре экрана с Opacity установленным свойством, чтобы изменить уровень непрозрачности формы.It creates a new form that is positioned in the center of the screen with an Opacity property set to change the opacity level of the form. В этом примере также задается Size свойство для увеличения размера формы, чем размер по умолчанию для формы.The example also sets the Size property to provide a larger sized form than the default size of the form.

В этом примере предполагается, что метод вызывается из другой формы в обработчике событий или в другом методе.This example assumes that the method is called from another form in an event handler or other method.

Прозрачность текста и фона

Вариант в примере с текстом аналогичен вставке изображений. Создавать в CSS прозрачность отдельно также не потребуется. В данном случае необходимо будет заменить теги на те, что используются для верстки текстовых полей. Таковыми являются «p» и «span».

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

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

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 прозрачность картинки.

Рассмотрим несколько вариантов создания полупрозрачной картинки. В следующем примере первой картинки не задана прозрачность, вторая имеет прозрачность 50%, третья 30%.

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

Результат:

Прозрачность на CSS при наведении курсора на картинку.

Часто необходимо сделать прозрачным картинку или любой другой элемент в тот момент когда на его наведен курсор. Сделать это можно при помощи CSS псевдокласса:hover. Для этого нашей картинке нужно прописать два класса один обычный — это будет неактивное состояние картинки и второй класс с псевдоклассом:hover, здесь необходимо указать прозрачность картинки в момент наведения курсора.

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

Результат можете посмотреть в демо.

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

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

В качестве примера приведем вариант с фоном страницы созданным при помощи картинки и блоком с фоном созданным при помощи цвета и обладающим прозрачностью 50%.

Пример кода:

Прозрачность
Текст

Вот результа размещенного выше кода:

Как задать в css прозрачный цвет? На текущий момент для этого есть 3 способа.

Способ 1 — значение transparent

Если вы зададите в качестве значения цвету текста или фона значение transparent , то цвет будет полностью прозрачным, то есть невидимым. Пример:

Color: transparent;

Такой текст нельзя будет увидеть на странице.

Способ 2 — цветовой режим rgba

А это уже нововведение css3. Ранее в веб-разработке такого режима не было, был только rgb. Наверняка вы знаете, как записывать цвет в этом формате. Для этого вам нужно в скобках указать три значения от 0 до 255, указывающие на насыщенность одного из трех основных цветов (красный, зеленый, синий). Например:

Background: rgb(230, 121, 156);

Формат rgba ничем не отличается, только добавляется четвертое значение — степень прозрачности элемента от 0 до 1. Вообще этот формат записи в основном используют, чтобы задать полупрозрачный цвет, а не полностью прозрачный. Чтобы достичь полной прозрачности, нужно всего лишь в качестве четвертого значения написать 0.

Background: rgba(0, 0, 0, 0);

В таком случае остальные 3 цифры особой роли не играют.

Полупрозрачный же цвет можно задать, если в качестве четвертого параметра задать значение от 0.01 до 0.99. О уже писал немного о задании полупрозрачности фону в , можете ознакомиться, если интересно.

Способ 3 — opacity

Еще одно свойство из технологии css3. Но я хочу вас сразу предупредить, что оно работает немного по-другому. С помощью opacity прозрачность задается всему блоку, к которому оно применяется. Таким образом, ухудшается читабельность текста и восприятие картинок. Так что свойство я вижу смысл применять только для блоков, в которых нет текста и какой-то иной информации. Значения можно задавать от 0 до 1, как и в случае с четвертым параметром при задании цвета в формате rgba .

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

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-свойства, определяющие переходы

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

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

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

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

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

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

(en-US)

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

(en-US)

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

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

Комментарии

OpacityСвойство позволяет указать уровень прозрачности для формы и ее элементов управления.The Opacity property enables you to specify a level of transparency for the form and its controls. Если для этого свойства задано значение менее 100% (1,00), вся форма, включая границы, становится более прозрачной.When this property is set to a value less than 100 percent (1.00), the entire form, including borders, is made more transparent. Присвоение этому свойству значения 0% (0,00) делает форму полностью невидимой.Setting this property to a value of 0 percent (0.00) makes the form completely invisible. Это свойство можно использовать для предоставления различных уровней прозрачности или для предоставления таких эффектов, как перенося формы в или из представления.You can use this property to provide different levels of transparency or to provide effects such as phasing a form in or out of view. Например, можно поэтапно просмотреть форму, задав Opacity для свойства значение 0% (0,00) и постепенно увеличивая его до достижения 100 процентов (1,00).For example, you can phase a form into view by setting the Opacity property to a value of 0 percent (0.00) and gradually increasing the value until it reaches 100 percent (1.00).

Opacity отличается от прозрачности, предоставляемой TransparencyKey , которая делает форму и ее элементы управления полностью прозрачными, если они имеют тот же цвет, что и значение, указанное в TransparencyKey свойстве.Opacity differs from the transparency provided by TransparencyKey, which only makes a form and its controls completely transparent if they are the same color as the value specified in the TransparencyKey property.

Это свойство не поддерживается, если RightToLeftLayout имеет значение .This property is not supported when RightToLeftLayout is .

OpacityСвойство зависит от многоуровневого интерфейса Windows API.The Opacity property depends on the Layered Windows API. Дополнительные сведения см. в разделе .For more information, see .

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

: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 положение исправлено)

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial 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 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

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

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

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

Код в шестнадцатиричной системе

В CSS цвет можно установить с помощью числа в шестнадцатиричной системе счисления. Число состоит из шести
знаков.

  • первые два знака устанавливают интенсивность красного цвета
  • вторые два знака устанавливают интенсивность зелёного
  • третьи два знака устанавливают интенсивность синего

Перед числом ставится
знак #. Чтобы устаносить такой же цвет текста, стиль нужно указать так:

5
color: #9C16B5;

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

67
color: #FFCC00;
color: #FC0;

В коде цвета буквы могут быть как большими, так и маленькими.

Примеры

Пример

Свойство opacity добавляет прозрачность к фону элемента, а также ко всем его дочерним элементам. Это делает текст внутри прозрачного элемента трудно читаемым:

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

Пример

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

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);}

Редактор кода »

Совет: Узнать больше о цветах RGB в CSS RGBA Цвета.

Пример

Как использовать JavaScript для изменения непрозрачности элемента:

function myFunction(x) {// Возвращает текст выбранного параметра  var opacity = x.options.text;  var el = document.getElementById(«p1»);
  if (el.style.opacity !== undefined) {    el.style.opacity = opacity;  } else {
    alert(«Ваш браузер не поддерживает этот пример!»);  }
}

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector