opacity | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.0+ | 2.0+ | 1.7+ | 2.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | 1 |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Процентная запись | Неприменима |
| Ссылка на спецификацию | http://www.w3.org/TR/css3-color/#transparency |
Версии CSS
Описание
Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.
Синтаксис
opacity: значение
Значения
В качестве значения выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6.
Пример
HTML5CSS2.1CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>opacity</title>
<style>
.semi {
opacity: 0.5; /* Полупрозрачность элемента */
}
</style>
</head>
<body>
<p>
<img src="images/igels.png" alt="Обычный рисунок">
<img src="images/igels.png" alt="Полупрозрачный рисунок">
</p>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Результат использования opacity
Браузеры
Firefox до версии 3.5 поддерживает нестандартное свойство -moz-opacity.
Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.
opacity — CSS | MDN
CSS-свойство opacity устанавливает непрозрачность элемента. Непрозрачность — это степень, в которой содержимое скрывается за элементом, является противоположностью прозрачности.
opacity применяется к элементу в целом, включая его содержимое, даже если значение не наследуется дочерними элементами. Таким образом, элемент и его потомки имеют одинаковую непрозрачность относительно фона элемента, даже если они имеют различную непрозрачность относительно друг друга.
Использование opacity со значением, отличным от 1, помещает элемент в новый контекст наложения.
Если вы не хотите применять opacity к дочерним элементам, используйте взамен свойство background. Например:
background: rgba(0, 0, 0, 0.4);Значения
<alpha-value>числов пределах от0.0до1.0, включительно, илипроцентыв пределах от0%до100%, включительно, представляет непрозрачность канала (т.е. значение его альфа-канала). Любое значение вне интервала, хотя и является валидным, округляется до ближайшего предела в диапазоне.Значение Действие 0Элемент полностью прозрачен (он становится невидимым). Любое числострого между0и1Элемент полупрозрачный (т.е. содержимое элемента можно увидеть). 1(значение по умолчанию)Элемент полностью непрозрачный (видимый).
Формальный синтаксис
Базовый пример
div { background-color: yellow; }
.light {
opacity: 0.2;
}
.medium {
opacity: 0.5;
}
.heavy {
opacity: 0.9;
}
<div>You can barely see this.</div>
<div>This is easier to see.</div>
<div>This is very easy to see.</div>
Различная непрозрачность с
:hoverimg.opacity {
opacity: 1;
filter: alpha(opacity=100);
zoom: 1;
}
img.opacity:hover {
opacity: 0.5;
filter: alpha(opacity=50);
zoom: 1;
}<img src="//developer.mozilla.org/static/img/opengraph-logo.png" alt="MDN logo" >
Если непрозрачность текста регулируется, важно убедиться, что коэффициент контрастности между цветом текста и фоном, на котором размещён текст, достаточно высок, чтобы люди, испытывающие проблемы со слабым зрением, могли читать содержимое страницы.
Коэффициент цветовой контрастности определяется путём сравнения яркости текста с откорректированной непрозрачностью и значением цвета фона. Чтобы соответствовать действующим Рекомендациям по доступности веб-контента (WCAG), для текстового содержимого требуется соотношение 4.5:1 и 3:1 для более крупного текста, такого как заголовки. Большой текст определяется как 18.66px и жирный или крупнее, или 24px или выше.
BCD tables only load in the browser
Способы создания прозрачных фонов у блоков в CSS
Вы хотите научиться создавать страницы с оригинальным и ярким современным дизайном? Применение полупрозрачных элементов способно помочь Вам в решении этой непростой задачи. Сегодня мы рассмотрим основные практические способы задания прозрачности структурных элементов.
Как задать прозрачность?
Если рассматривать данную тему сквозь призму исторического развития веб-технологий, то можно выделить следующие подходы:
- Свойство opacity.
- Использование PNG -картинки
- Формат системы RGBA
- Ну, и наконец, древность или клетчатые изображения.
CSS свойство Opacity
Применение стилевого CSS свойства оpacity позволяет задать прозрачность того элемента, к которому применяется. Значения, которые можно использовать в качестве аргумента изменяются в пределах от 0 до 1.
Рассмотрим пример.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<link rel="stylesheet" media="all" type="text/css" href="css/style2.css" />
</head>
<body>
<div>
Тут будет много Вашего текста
</div>
</body>
</html>CSS:
body {
background: url(./vaden-pro-logo.png); /* Фон для тела страницы */
}
. prozrachen {
padding: 10px; /*Отступы для текста*/
background: darkturquoise; /* Задаем цвет фона */
margin: 0 auto; /* Центрируем блок */
width: 50%; /* Задаем ширину блока */
opacity: 0.7; /* Задаем прозрачность */
font: 48px/64px Times New Roman;
text-align: justify;
}В результате мы получили полупрозрачный блок:
Важно!!!
- Opacity принимает значения из диапазона: 0 (полная прозрачность) – 1 (непрозрачность).
- Кросс-браузерность. В IE до седьмой версии включительно Opacity не поддерживается. Добиться одинакового отображения элемента поможет следующая строчка:
Стоит принимать во внимание то, что свойство filter отсутствует в html спецификациях, изменяет значения от 1 до 100 и может применяться только к элементам:
- с абсолютным позиционированием (position: absolute)
- с фиксированным линейным размером (height или width).
- Степень прозрачности наследуется дочерними элементами, при чем дочернему элементу можно увеличить прозрачность, но сделать меньше – нельзя. Т. е. на полупрозрачном фоне НЕ ПРОЗРАЧНОГО текста не сделать.
Для лучшего понимания материала последнего пункта, в предыдущем примере зададим тексту белый цвет
и рассмотрим его под микроскопом:
Как видим, контент нашего блока (текст) тоже стал полупрозрачным. Но что делать, если на практике прозрачность содержимого вас не интересует, а интересует лишь прозрачность фона? В таком случае, переходим к следующему пункту.
Использование PNG -картинки
Интересной особенностью формата PNG является то, что он имеет 256 уровней прозрачности. Думаю, Вы уловили ход мыслей, и наверняка уже построили алгоритм работы такого подхода. Мне остается только его озвучить.
- Создаем в Photoshop, однотонную полупрозрачную картинку (назовем ее transparent) и сохраняем в формате png.
- Используем ее в качестве бэкграунда:
В результате мы получили блок с прозрачным фоном и непрозрачным содержимым:
Важно!!!
- В отличии от свойства opacity прозрачность задается только для фона
- Кросс-браузерность. Работает почти во всех браузерах, и это плюс. Но прозрачность PNG не поддерживается в IE6. Если вы оптимизируете свой сайт под такую древность – придется применять другие методы или скрипты.
- При отключении отображения картинок, ваш фон пропадет (учтите этот момент при оптимизации отображения на мобильных устройствах, ведь безлимитный интернет не всегда есть под рукою).
- Для изменения цвета и/или степени прозрачности вам нужно создать новую картинку и перезалить ее на серв.
Формат системы RGBA
Одним из самых современных методов изменения транспарантности фона является применение системы RGBA.
RGBA – система представления цвета при помощи трех стандартных каналов RGB (красный, зеленый, синий), и четвертого, так называемого Alpha-канала, характеризующего степень прозрачности.
background: rgba(r, g, b, a);
В уже известном нам примере, заменим содержимое в
body {
background: url(./vaden-pro-logo.png); /* Фоновый рисунок */
}
.prozrachen {
padding: 10px;
background: rgba(0, 206, 209, 0.7);
margin: 0 auto;
width: 50%;
font: 48px/64px Times New Roman;
color: white;
text-align: justify;
}Важно!!!
- В отличии от свойства opacity прозрачность задается только фону
- В отличии от метода PNG картинки, для изменения цвета или степени транспарентности нам нужно просто поменять значения rgba.
- Кросс-браузерность. Работает во всех современных браузерах (начиная с IE9, Op10, Fx3,Sf3.2
Клетчатые изображения, или с уважением к истории
Этот метод стоял у истоков веб-дизайна, и видел старые-старые браузеры, которые ничего толком не умели. Он заключается в создании клетчатого фона, в котором цветные квадратики чередовались с прозрачными.
В результате применения такой картинки в качестве background получали псевдо-прозрачный фон.
Важно!!!
- При просмотре текста на таком фоне могут быстро уставать глаза (особенно давит рябь при прокрутке).
- В остальном особенности применения аналогичны с методом «PNG -картинки».
Подытожим?
Напоследок, несколько общих рекомендаций по использованию прозрачности в своих проектах:
- Под прозрачным блоком должна находиться яркая не однообразная картинка. На однотонном фоне изюминка прозрачности теряется.
- При выборе конкретного практического подхода, ориентируйтесь на то, какими браузерами пользуется ваша целевая аудитория. Кросс-браузерность – вещь важная.
Успехов!!!
Оценок: 10 (средняя 5 из 5)
- 29886 просмотров
Понравилась статья? Расскажите о ней друзьям:
Курсы по CSS (в открытом доступе)
Уровень сложности:
Средний
Еще интересное
CSS — Прозрачность » Pechenek.NET
Доброго времени суток. В этой статье мы поговорим про свойство, которое отвечает за прозрачность любого элемента на веб-странице. Мы научимся применять его для других различных свойств и посмотрим за его поведением.CSS – Прозрачность
Прозрачность в CSS выглядит как opacity, и регулируется в рамках диапазона чисел с типом float (с плавающей запятой). Соответственно имеет значения от 0.0 до 1.0. Как ни странно это свойство применимо абсолютно ко всем элементам веб-страницы. Соответственно вы можете управлять прозрачностью всех элементов страницы. Давайте рассмотрим несколько примеров:
Немного рандомного текста про прозрачность в CSS.
В этом случае opacity равна 1. Уменьшим ее до 0.5:
Теперь прозрачность этого блока равна 0.5 единиц.
Как видите весь блок стал полупрозрачным. Теперь поступим иначе и обратимся к темной магии веб-программирования. Создадим внутри блока span и внутри него пропишем opacity равной 0.5 единиц, а из блока выше уберем это свойство:
Теперь в это блоке только у текста прозрачность равна 0.5 единиц.
Далее применим свойство opacity, к свойству background. Но если в случае с другими элементами все понятно, то теперь background, превращается в background-color: rgba(233,233,233, 0.1):
Теперь в это блоке только у текста прозрачность равна 0.5 единиц.
Конструкция свойства background-color: rgba(*,*,*,0.*) уже содержит в себе возможность использования свойства opacity. Соответственно нет надобности в том, чтобы отдельно для фона создавать например класс и настраивать у него прозрачность.
Несколько правил прозрачности css:
- не всей свойства css имеют встроенную возможность настройки opacity
- каждый раз настраивая прозрачность помните, что элементы расположенные “сзади” (выше по иерархии) буду становится видны.
- не стоит усердствовать со свойством opacity, лучше работать с фоном.
- настройка прозрачности не всегда уместна даже для изображений.
Итог
Безусловно свойство является полезным для реализации некоторых эффектов, которые нравятся всем нам. Но лучше работать со статичным свойствами, в которых трудно ошибиться. Неправильно настроенная прозрачность может привести к неверному процессу дебага, в итоге мы можете элементарно запутаться в том, какой тег у вас является родительским и какой дочерним. Особенно легко запутаться, если вы начинающий веб-мастер. Если у вас остались вопросы, милости просим в комментарии.
Чтобы не пропускать новые статьи подписывайте на нашу группу в ВК и ФБ, а так же каналы в телеграме и на ютубе!
Как в CSS сделать прозрачность в HEX формате?
Чтобы добавить прозрачность в HEX-формат, нужно добавить несколько дополнительных символов, которые будут означать альфа-канал (прозрачность).Прозрачность для цвета задается в процентах (от 0 до 100). Чтобы добавить прозрачность в HEX-формат — нужно необходимое значение прозрачности также конвертировать в шестнадцатеричное значение.
Для удобства, можно подсмотреть в табличку приведенную ниже:
# таблица шестнадцатеричных значения от нуля до ста. 100% — FF 99% — FC 98% — FA 97% — F7 96% — F5 95% — F2 94% — F0 93% — ED 92% — EB 91% — E8 90% — E6 89% — E3 88% — E0 87% — DE 86% — DB 85% — D9 84% — D6 83% — D4 82% — D1 81% — CF 80% — CC 79% — C9 78% — C7 77% — C4 76% — C2 75% — BF 74% — BD 73% — BA 72% — B8 71% — B5 70% — B3 69% — B0 68% — AD 67% — AB 66% — A8 65% — A6 64% — A3 63% — A1 62% — 9E 61% — 9C 60% — 99 59% — 96 58% — 94 57% — 91 56% — 8F 55% — 8C 54% — 8A 53% — 87 52% — 85 51% — 82 50% — 80 49% — 7D 48% — 7A 47% — 78 46% — 75 45% — 73 44% — 70 43% — 6E 42% — 6B 41% — 69 40% — 66 39% — 63 38% — 61 37% — 5E 36% — 5C 35% — 59 34% — 57 33% — 54 32% — 52 31% — 4F 30% — 4D 29% — 4A 28% — 47 27% — 45 26% — 42 25% — 40 24% — 3D 23% — 3B 22% — 38 21% — 36 20% — 33 19% — 30 18% — 2E 17% — 2B 16% — 29 15% — 26 14% — 24 13% — 21 12% — 1F 11% — 1C 10% — 1A 9% — 17 8% — 14 7% — 12 6% — 0F 5% — 0D 4% — 0A 3% — 08 2% — 05 1% — 03 0% — 00Конструкция цвета в CSS обычно выглядит так:
#FFFFFF или #FFFОбе записи означают один и тот же цвет — белый.
Основные браузеры (такие как Chrome) начали поддерживать альфа-канал (прозрачность) в hex цветах примерно с 2016 года (с разным уровнем стабильности). Чтобы добавить альфа канал в HEX значение — нужно добавить необходимую прозрачность в шестнадцатеричном формате в самый конец записи из шести символов.
Возьмем красный цвет и сделаем его полупрозрачным:
#FF000080 # 80 - шестнадцатеричная запись 50 (см таблицу выше)Таким образом, мы берем HEX-цвет и добавляем ему прозрачность, добавляя альфа канал в конец записи.
Конструкцию можно описать как RRGGBBAA.
А что же с HEX-цветом с записью цвета тремя символами? Примерно тоже самое, но в конец добавляется лишь один символ:
#F008Конструкцию можно описать как RGBA.
Корректность работы цвета можно непосредственно в браузере (задав css-атрибуту нужный цвет). На скриншоте ниже видно, что Chrome обозначает hex-цвет с прозрачностью (альфа-каналом) отдельной иконкой.
Прозрачность для HEX-цвета в CSS
Используя альфа-канал в HEX — убедитесь, что все браузеры, в которых ваш сайт/приложение должно работать поддерживают его.
Свойство CSS opacity: управление прозрачностью
Для управления прозрачностью элементов страницы используется свойство CSS opacity. По спецификации оно применимо к узлам любого типа и поддерживается во всех современных браузерах. С его помощью можно создать интересный дизайн или реализовать удобное интерактивное взаимодействие с пользователем.
Возможные значения
Синтаксис свойства opacity в css выглядит так:
selector {
opacity: 1;
}
selector {
opacity: 0;
}
selector {
opacity: 0.4;
}На вход принимаются числовые значения в диапазоне от 0 до 1. Параметр может представлять собой доли единицы, при этом в качестве разделителя целой и дробной части в CSS используется точка.
Элемент с нулевой прозрачностью становится невидимым, но все равно продолжает занимать свое место на странице и сохраняет возможность взаимодействовать с пользователем.
Если значение свойства отличается от нуля, то реальная прозрачность будет вычисляться как процент от некоторого верхнего предела. В обычной ситуации opacity: 1 определяет полную непрозрачность элемента.
Прозрачность дочерних узлов
Однако если элемент имеет родителя, прозрачность которого отличается от единицы, вычисление изменяется. Потомок не может быть «менее прозрачным», чем любой из его предков. Значение CSS-свойства opacity родительского блока становится верхним пределом прозрачности дочернего узла.
parent {
opacity: 0.7;
}
child {
opacity: 1;
}В подобной ситуации элемент child будет на 30 % прозрачным, несмотря на то что значение opacity равно единице.
Примеры использования
Пример 1. Полупрозрачность. Необходимо, чтобы под элементом target был виден основной фон блока.
.target {
background: black;
opacity: 0.5;
}Полупрозрачным становится не только фон блока target, но и текст.
Пример 2. Динамическое управление прозрачностью. Значение свойства CSS opacity блока target изменяется при наведении на него курсора.
.target {
opacity: 0.2;
}
.target:hover {
opacity: 1;
}Динамическая прозрачность
Последний пример демонстрирует, что прозрачные элементы продолжают реагировать на события страницы, такие как наведение курсора. Это позволяет использовать javascript для управления свойством CSS opacity, а также применять механизмы transition и animation для плавного изменения режима отображения.
Чтобы получить доступ к прозрачности из скрипта, нужно обратиться к объекту style конкретного элемента.
// получение текущего значения прозрачности
var opacity = element.style.opacity;
// установка нового значения
element.style.opacity = 0.4;Плавное исчезновение блока можно реализовать с помощью CSS-свойства transition:
element {
opacity: 0.1;
transition: opacity 1000ms;
}
element:hover {
opacity: 0.8;
transition: opacity 2000ms;
}Теперь узел element при наведении мышки будет изменять прозрачность от 10 до 80 % в течение одной секунды, а при уходе курсора — тускнеть до исходного значения в течение двух секунд.
Свойство CSS opacity в сочетании с механизмом transition позволяет создавать красивые эффекты.
Альфа-канал вместо opacity
Главные тонкости механизма opacity в CSS:
- его действие распространяется не только на фон блока, но и на его текстовый контент, который предпочтительнее оставлять четким;
- дочерние элементы не могут быть менее прозрачными, чем родительские.
Если эти эффекты осложняют жизнь верстальщика, вместо opacity следует использовать просто прозрачный фон, определив его значение в формате RGBA или HSLA.
прозрачность css
W3C в своей рекомендации CSS3 определяет свойство opacity для применения эффекта прозрачности к элементам страницы. Значением данного свойства является число в диапазоне от 0.0 до 1.0. При значении равном нулю элемент становится полностью прозрачным, а при значении равном единице, соответственно, совсем не прозрачным. Свойство можно применять к любым элементам страницы.
код CSS
.img1 { opacity: 0.2; } |
код HTML
<html> <head> <style type=text/css> .img1 { opacity: 0.2; } </style> </head> <body> <img src=»встовляем картинку»> <img src=»»> <img src=»»> </body> </html> |
Понятное дело, что разные браузеры по-разному реализуют данное свойство: кто вообще не реализует, кто реализует, используя свое собственное название для данного свойства, а кто фильтры использует.
Браузеры поддерживающие CSS3 opacityПонимают CSS3 свойство opacity следующие браузеры: Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9.
CSS Прозрачность / прозрачность изображения
Свойство opacity определяет непрозрачность / прозрачность элемента.
Прозрачное изображение
Свойство непрозрачности может принимать значение от 0,0 до 1,0. Чем меньше значение, тем прозрачнее:
непрозрачность 0,2
непрозрачность 0,5
непрозрачность 1
(по умолчанию)
Прозрачный эффект наведения
Свойство непрозрачности часто используется вместе со свойством : hover .
селектор для изменения непрозрачности при наведении указателя мыши:
Объяснение примера
Первый блок CSS похож на код в Примере 1.Кроме того, мы добавили, что должно происходить, когда пользователь наводит курсор на одно из изображений. В этом случае мы хотим, чтобы изображение НЕ было прозрачным, когда пользователь наводит на него курсор. CSS для этого — непрозрачность: 1; .
Когда указатель мыши отодвинется от изображения, изображение снова станет прозрачным.
Пример обратного эффекта наведения:
Прозрачная коробка
При использовании свойства непрозрачности для добавления прозрачности фону элемента все его дочерние элементы
наследуют ту же прозрачность.Это может затруднить чтение текста внутри полностью прозрачного элемента:
Прозрачность с использованием RGBA
Если вы не хотите применять непрозрачность к дочерним элементам, как в нашем примере выше, используйте значения цвета RGBA . В следующем примере устанавливается непрозрачность цвета фона, а не текста:
Из нашей главы о цветах CSS вы узнали, что вы можете использовать RGB в качестве значения цвета. Помимо RGB, вы можете использовать значение цвета RGB с альфа-каналом (RGBA), который определяет непрозрачность цвета.
Значение цвета RGBA задается с помощью: rgba (красный, зеленый, синий, альфа ). В альфа Параметр — это число от 0,0 (полная прозрачность) до 1,0 (полная непрозрачность).
Совет: Вы узнаете больше о цветах RGBA в нашей главе о цветах CSS.
Пример
div {
фон: rgba (76, 175, 80, 0.3) / * Зеленый фон с 30%
непрозрачность * /
}
Текст в прозрачной рамке
Это текст, помещенный в прозрачную рамку.
Пример
div.background {
фон: url (klematis.jpg) повторять;
граница: сплошной черный цвет 2px;
}
div.transbox {
margin: 30px;
цвет фона: #ffffff;
граница: сплошной черный 1px;
непрозрачность: 0,6;
}
div.transbox p {
маржа: 5%;
font-weight: жирный;
цвет: # 000000;
}
Это текст, помещенный в прозрачное поле.