Opacity

color

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

Наложенный поверх красновато-коричневый слой не только сделает исходные пиксели красновато-коричневыми, как это было в случае с режимом , но также придаст им такую же насыщенность.

Того же эффекта можно достичь, если изменить порядок слоёв, поместив цвет под фотографию, и наложить фотографию с помощью режима наложения (Яркость).

Значения цвета

В HTML цвета также могут быть заданы с помощью значений RGB, шестнадцатеричных значений, HSL значений, RGBA значений и HSLA значений:

Так же, как название цвет «Tomato»:

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

Так же, как название цвета «Tomato», но 50% прозрачный:

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)

Пример

<h1 style=»background-color:rgb(255,
99, 71);»>…</h1><h1 style=»background-color:#ff6347;»>…</h1><h1 style=»background-color:hsl(9,
100%, 64%);»>…</h1><h1 style=»background-color:rgba(255,
99, 71, 0.5);»>…</h1><h1 style=»background-color:hsla(9,
100%, 64%, 0.5);»>…</h1>

Способ 3. Пропиаренный

Значение параметра варьируется в диапазоне , где при 0 объект невидим, а при 1 – отображается полноценно. Однако и здесь есть некие неприятные моменты.

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

Во-вторых, Internet Explorer опять «воротит носом» и вплоть до 8 версии не функционирует с opacity.

Для решения этой проблемы используется filter: alpha (Opacity=значение).

Рассмотрим пример.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta charset=utf-8" />
  <title>Пример 2</title>
  <style type="text/css">
   BODY {
    background: url(https://www.uarating.com/news/wp-content/uploads/2016/05/flowers-04-may-2016.jpg) no-repeat; 
    background-size:100%;
   }
   div {
    background: #FFEFD5;    
    opacity: 0.88;
    filter: alpha(Opacity=88); 
padding: 25px; 
text-align:center;
   }
  </style>
 </head>
 <body>
  <div>
   В нашем магазине вы найдете все виды цветов.
  </div>
 </body>
</html>

Цвет в 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;
}

НазадВперед

Свойство opacity

Свойство CSS 3 opacity задает значение прозрачности и варьируется от 0 до 1, где ноль это полная прозрачность элемента, а единица, наоборот, непрозрачность. У свойства opacity есть особенность — прозрачность распространяется на все дочерние элементы, и они не могут превысить значение прозрачности своего родителя. Получается, что непрозрачный текст на полупрозрачном фоне быть не может (пример 2).

Пример 2. Использование opacity

XHTML 1.0CSS 2.1CSS 3IECrOpSaFx

Результат примера показан на рис. 5.

Рис. 5. Полупрозрачность текста и фона

В Internet Explorer до версии 8.0 включительно opacity не работает, поэтому для него используется специфичное для этого браузера свойство filter. Естественно, оно приводит к невалидному коду CSS.

Необходимое перед удалением фона

Первым шагом разберитесь, присутствует ли альфа-канал в изображении. В компьютерной графике альфа-канал определяет комбинирование изображения с фоном, для создания эффекта прозрачности. Если альфа нет в изображении, то придется создать канал, который будет отвечать за прозрачность. В меню редактора найдите вкладку «Слой => Прозрачность => Добавить альфа-канал».

Если канал уже присутствует среди слоев, то меню будет неактивным. Еще один вариант для проверки наличия среди стандартных слоев — альфа-канала. Для этого нажмите «Окна => Стыкуемые диалоги => Каналы». Если справа среди слов по умолчанию, найдется один с названием «Альфа», то картинка готова к дальнейшей обработке и удалению фона.

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

Для создания эффекта прозрачности в CSS используется свойство opacity.

Браузер IE8 и более ранние его версии поддерживают альтернативное свойство — , где «» может принимать значение от до , чем меньше значение, тем прозрачнее будет элемент.

Все остальные браузеры поддерживают стандартное CSS свойство , которое может принимать в качестве значения числа от до , чем меньше значение, тем прозрачнее будет элемент:

<!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Название документа</title>   <style>   .myClass {   float: left;   margin-right: 5px;   opacity: 0.4;   filter: alpha(opacity=40); /*для IE8 и более ранних версий*/   }   </style>   </head>     <body>   <img src="klematis.jpg" class="myClass">  	<img src="klematis.jpg">   </body>  </html>  

Попробовать »

Способ 2. Не замороченный

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Пример 1

Пример 1
Текст на рисунке в формате png.

Однако такой способ не удобен по нескольким причинам:

  1. Internet Explorer 6 не работает с такой технологией, для него нужно писать скриптовый код;
  2. Нельзя видоизменять цвета фона в css;
  3. Если в браузере отключена функция отображения изображений, то исчезнет.

Прозрачный фон

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

В других графических редакторах этот инструмент называется «Волшебная палочка». Действие и вправду волшебное! В выделенную область добавляются пиксели единого цвета, что подходит при выделении фона одного цвета. Когда фон выделен, осталось дело за малым – вырезать фон. Нажмите клавишу Delete на клавиатуре и фон принимает вид шахматной доски. Серые квадратики и будут говорить о том, что фон прозрачный. Изображение готово к сохранению!

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

Чтобы сохранить PNG изображение с прозрачными областями нажмите «Файл => Экспортировать как…»

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

В настройках ничего не меняем, по умолчанию уже настроены графическим редактором. В дальнейшем почистите фон и уберите лишнее инструментом «Выделение смежных областей», о котором говорили до этого, если удаление фона не прошло верно. Чтобы края изображения сгладились, уберите пиксели, которые остаются после удаления фото на контуре. Для этого в настройках инструмента попробуйте увеличить «Порог». На сколько поднять – смотрите по фото, экспериментируйте!

В будущем, когда будете открывать картинку в GIMP формата PNG или GIF, то проверять на наличие канала альфа уже не понадобится. В этих двух форматах канал альфа присутствует и вручную добавлять не приходится.
Зная, как удалить фон, время приступать к сложным проектам. Удачи!

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 Style
Font Size
Font Google
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS TablesCSS 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 Specificity

С этим читают

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+, что и учтено в коде.

Больше

Fullscreen VideoМодальные коробкиШкалаИндикатор прокруткиСтроки хода выполненияПанель уменийПолзунки диапазонаПодсказкиPopupsСкладнойКалендарьHTML вставкаСписокПогрузчикиЗвездвРейтинг пользователейЭффект наложенияКонтактные фишкиКартыКарточка профиляОповещенияЗаметкиМеткиКругиКупонОтзывчивый текстФиксированный нижний колонтитулЛипкий элементОдинаковая высотаClearfixСнэк-барПрокрутка рисункаЛипкий заголовокТаблица ценПараллаксПропорцииПереключение типа/не нравитсяВключить скрытие/отображениеПереключение текстаПереключение классаДобавить классУдалить классАктивный классУвеличить HoverПереход при наведенииСтрелкиФормыОкно браузераНастраиваемая полоса прокруткиЦвет заполнителяВертикальная линияАнимация значковТаймер обратного отсчетаМашинкуСкоро страницаСообщения чатаРазделить экранОтзывыЦитаты слайд-шоуЗакрываемые элементы спискаТипичные точки останова устройстваПеретаскивание HTML-элементаКнопка спуска на входеJS медиа запросыJS анимацииПолучить элементы IFRAME

RGBA

Современный подход гораздо проще и нагляднее вышеприведенных методов и состоит в использовании для цвета и фона формат RGBA. Первые три буквы знакомы многим и расшифровываются как red, green, blue (красный, зеленый, синий), последняя символизирует собой альфа-канал и задает прозрачность элемента. Формат записи такой.

background-color: rgba(r, g, b, a);

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

Не все браузеры поддерживают такой формат: Internet Explorer начиная с версии 9, Opera с версии 10, Firefox с 3, Safari с 3.2. Но в целом, современные браузеры корректно отображают прозрачность. Для старых версий IE можно отдельно указать цвет в привычном для него формате, при этом, естественно, никакой прозрачности не будет. Или опять воспользоваться свойством filter, но тогда придется мириться, что прозрачность также затронет и текст (пример 3). Чтобы соблюсти валидный код CSS, я воспользовался условными комментариями.

Пример 3. Использование RGBA

HTML5CSS3IECrOpSaFx

Результат примера можно посмотреть на рис. 6.

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

Сравните картинку с предыдущей, буквы стали ярче и четче.

В браузере Internet Explorer 7 обнаружился баг при сочетании background-color с разными значениями. К примеру, если задать цвет фона красным, как показано ниже, то фон в IE7 вообще не отобразится.

Решается это заменой свойства background-color на background.

backgroundbackground-color

Фоновая прозрачность изображения с CSS3?

Постараюсь приводить различные сочетания горячих клавиш.

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

Открываем нужное изображение в редакторе. Теперь сделаем прозрачный фон для слоя. В окне «Слои» кликаем два раза мышкой по добавленному слою – напротив него будет стоять замочек. Откроется окно «Новый слой», нажмите в нем «ОК». После этого замочек исчезнет.

Выбираем инструмент «Волшебная палочка». В строке свойств укажите уровень чувствительности, позадавайте разные значения, чтобы понять, как он работает, например 20 и 100. Чтобы снять выделение с рисунка нажмите «Ctrl+D».

Задаем чувствительность и нажимаем волшебной палочкой на область фона. Чтобы добавить к выделенному фону, те части, которые не выделились, зажмите «Shift» и продолжайте выделение. Для удаления выделенных областей нажмите «Delete».

Теперь вместо фона шахматная доска – это значит, что у нас получилось сделать белый фон прозрачным. Снимаем выделение – «Ctrl+D».

Чтобы правильно сохранить изображение на прозрачном фоне, выберите формат PNG или GIF, в любом другом формате, оно сохраниться на белом фоне.

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

В этом случае, воспользуемся инструментом «Быстрое выделение». Кликаем по волшебной палочке левой кнопкой мыши с небольшой задержкой и выбираем из меню нужный инструмент.

Теперь нужно выделить объект, который мы хотим оставить на прозрачном фоне. В строке свойств устанавливайте различные размеры и кликайте на объект, добавляя к нему области. Если ошибочно выделится ненужный фон, нажмите «Alt» и уберите его.

Для просмотра результата нажмите «Q». Розовым будут выделены те части изображения, которые станут прозрачными.

Копируем выделенные области, нажав «Ctrl+C». Дальше создаем новый файл, «Ctrl+N», с прозрачным фоном.

Вставляем в него скопированные фрагменты, «Ctrl+V». Если на них остались ненужные части фона, уберите их, используя инструмент «Ластик». Сохраняем сделанные на прозрачном фоне картинки в формате PNG или GIF.

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

Цвет фона блока

Свойство background-color устанавливает цвет фона. Значением этого свойства
является цвет, указаннный одним из способов, существующих в CSS. Кроме того, оно
принимает такие значения:

background-color: transparent — прозрачный фон (по умолчанию)

background-color: inherit — значение принимается от родительского элемента

Значение transparent используется в CSS, когда нужно вернуть прозрачный фон блоку,
если ранее он уже был изменён.

Создадим блок, зададим ему размеры и установим цвет фона.

Стиль:

+

789101112
#div1
  {
  width: 300px;
  height: 50px;
  background-color: Green;
  }

HTML код:

16
<div id="div1">Блок с фоном</div>

Эффект прозрачности фона (HTML и CSS)

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

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

Рассмотрим полупрозрачность текста и фона — как правильно ее использовать в дизайне сайта:

opacity

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

HTML 5 CSS 3 IE 9
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>opacity</title> <style> body { background: url(images/cat.jpg); } div { opacity: 0.6; background: #fc0; /* Цвет фона */ padding: 5px; /* Поля вокруг текста */ } </style> </head> <body> <div>Создание и продвижение сайтов в интернете</div> </body> </html>

RGBA

В веб-дизайне частичная прозрачность также применяется и достигается за счёт формата цвета RGBA, который задаётся только для фона элемента.

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

Полупрозрачный фон

HTML 5 CSS 3 IE 9
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>rgba</title> <style> body { background: url(images/cat.jpg); } div { background: rgba(0, 170, 238, 0.4); /* Цвет фона */ color: #fff; /* Цвет текста */ padding: 5px; /* Поля вокруг текста */ } </style> </head> <body> <div>Создание и продвижение сайтов в интернете.</div> </body> </html>

Значение непрозрачности для фона установлено 90% — полупрозрачный фон и непрозрачный текст.

  • < Назад
  • Вперёд >

Использование css-свойства opacity

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

Синтаксис свойства css:

opacity: значение;

где значение указывается в диапазоне от 0.0 (элемент полностью прозрачен) до 1.0 (элемент абсолютно не прозрачен).

Итак, для примера сделаем блок с классом fon, и для него зададим, для наглядности, фоновое изображение. В этом блоке разместим два блока с текстом opas1 и opas2, для которых зададим черный фон. После чего для второго блока зададим значение opacity равное 0.3.

Вот что получится:

Блок без прозрачности

Демонстрация работы свойства css opacity

HTML-код примера:

XHTML

<div class=»fon»>
<div class=»opas1″>
Блок без прозрачности
</div>
<div class=»opas2″>
Демонстрация работы свойства css opacity
</div>
<div>

1
2
3
4
5
6
7
8
9
10
11

<div class=»fon»>

<div class=»opas1″>

Блок без прозрачности
</div>
 

<div class=»opas2″>

Демонстрация работы свойства css opacity
</div>
 
<div>

CSS-код:

CSS

.fon{
background:url(images/opacity1.jpg);
width:400px;
padding:30px;
margin:auto;
}
.opas1{
width: 300px;
padding:30px;
background:#000;
margin:auto;
text-align:center;
margin:10px;
font-size:18px;
color:#fff;
}
.opas2{
width: 300px;
padding:30px;
background:#000;
margin:auto;
text-align:center;
opacity:0.3; /* уровень прозрачности в css*/
margin:10px;
font-size:18px;
color:#fff;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

.fon{

backgroundurl(images/opacity1.jpg);

width400px;

padding30px;

marginauto;

}
 

.opas1{

width300px;

padding30px;

background#000;

marginauto;

text-aligncenter;

margin10px;

font-size18px;

color#fff;

}
 

.opas2{

width300px;

padding30px;

background#000;

marginauto;

text-aligncenter;

opacity0.3;/* уровень прозрачности в css*/

margin10px;

font-size18px;

color#fff;

}

Как видите, свойство css сработало, блок с классом opas2 стал прозрачным и через него проглядывается фоновое изображение.

Но здесь есть один неприятный момент. Как вы могли заметить, текст потускнел, то есть он тоже стал прозрачным. Это произошло из-за того, что все дочерние элементы блока, в нашем случае – текст, унаследовали прозрачность заданную в css.

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

А что же делать, если нам нужно задать в css прозрачность фона для блока, но при этом сохранить читабельность содержащегося в нем текста?

Правильное сохранение.

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

Белый задний вид остается в формате GEPG. Поэтому лучше сохранять либо в PNG, либо в GIF. Я больше предпочтение отдаю PNG.

Для сохранения результата переходим в верхнюю строку. Нажимаем на «Файл». После этого перед нами появится список функций, выбираем «Сохранить как…». Далее перед нами откроется окно, в котором можно придумать какое-либо уникальное имя для файла и тип.

Помним, что тип мы выбираем либо PNG, либо GIF. Я выбрал первый вариант.

И также в этом окне вы можете выбрать место для хранения изображения.

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

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

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

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

5
color: #9C16B5;

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

67
color: #FFCC00;
color: #FC0;

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

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.

RGBA

Современный подход гораздо проще и нагляднее вышеприведенных методов и состоит в использовании для цвета и фона формат RGBA. Первые три буквы знакомы многим и расшифровываются как red, green, blue (красный, зеленый, синий), последняя символизирует собой альфа-канал и задает прозрачность элемента. Формат записи такой.

background-color: rgba(r, g, b, a);

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

Не все браузеры поддерживают такой формат: Internet Explorer начиная с версии 9, Opera с версии 10, Firefox с 3, Safari с 3.2. Но в целом, современные браузеры корректно отображают прозрачность. Для старых версий IE можно отдельно указать цвет в привычном для него формате, при этом, естественно, никакой прозрачности не будет. Или опять воспользоваться свойством filter, но тогда придется мириться, что прозрачность также затронет и текст (пример 3). Чтобы соблюсти валидный код CSS, я воспользовался условными комментариями.

Пример 3. Использование RGBA

HTML5CSS3IECrOpSaFx

Результат примера можно посмотреть на рис. 6.

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

Сравните картинку с предыдущей, буквы стали ярче и четче.

В браузере Internet Explorer 7 обнаружился баг при сочетании background-color с разными значениями. К примеру, если задать цвет фона красным, как показано ниже, то фон в IE7 вообще не отобразится.

Решается это заменой свойства background-color на background.

Однако здесь есть один нюанс. Валидатор CSS «ругается» на background, если ему задать значение в формате RGBA. Но при этом корректно относится к background-color. В общем, как всегда, приходится выбирать между браузерами и валидностью.

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) .

Вывод

Формат RGBA
поддерживают все современные браузеры, за исключением Internet Explorer

Ещё очень важно, что RGBA
гибок, он действует только на конкретный заданный элемент, не затрагивая дочерних. Понятно, что для верстальщика это удобнее

Мой выбор однозначно в пользу формата RGBA
для получения прозрачности в CSS
.

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

Доброго времени суток, гики веб-разработки, а также ее новички. Для тех, кто не следит за трендами IT-области, а точнее за веб-модой, я хочу торжественно сообщить, что эта публикация на тему: «Как сделать прозрачный блок css инструментами» вам как раз кстати. Ведь в текущем 2016 году внедрение в онлайн-сервисы различных прозрачных объектов считается стильным ходом.

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

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

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

Adblock
detector