Содержание

opacity | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
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>

Различная непрозрачность с

:hover
img.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;
   }

В результате мы получили полупрозрачный блок:

Важно!!!

  1. Opacity принимает значения из диапазона: 0 (полная прозрачность) – 1 (непрозрачность).
  2. Кросс-браузерность. В IE до седьмой версии включительно Opacity не поддерживается. Добиться одинакового отображения элемента поможет следующая строчка:
      filter: alpha(Opacity=70);  

    Стоит принимать во внимание то, что свойство filter отсутствует в html спецификациях, изменяет значения от 1 до 100 и может применяться только к элементам:

    • с абсолютным позиционированием (position: absolute)
    • с фиксированным линейным размером (height или width).
  3. Степень прозрачности наследуется дочерними элементами, при чем дочернему элементу можно увеличить прозрачность, но сделать меньше – нельзя. Т. е. на полупрозрачном фоне НЕ ПРОЗРАЧНОГО текста не сделать.

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

и рассмотрим его под микроскопом:

Как видим, контент нашего блока (текст) тоже стал полупрозрачным. Но что делать, если на практике прозрачность содержимого вас не интересует, а интересует лишь прозрачность фона? В таком случае, переходим к следующему пункту.

Использование PNG -картинки

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

  1. Создаем в Photoshop, однотонную полупрозрачную картинку (назовем ее transparent) и сохраняем в формате png.

  2. Используем ее в качестве бэкграунда:
    body { background: url(./vaden-pro-logo.png); } .prozrachen { padding: 10px; background: url(./transparent.png); margin: 0 auto; width: 50%; font: 48px/64px Times New Roman; color: white;</li> text-align: justify; }

В результате мы получили блок с прозрачным фоном и непрозрачным содержимым:

Важно!!!

  1. В отличии от свойства opacity прозрачность задается только для фона
  2. Кросс-браузерность. Работает почти во всех браузерах, и это плюс. Но прозрачность PNG не поддерживается в IE6. Если вы оптимизируете свой сайт под такую древность – придется применять другие методы или скрипты.
  3. При отключении отображения картинок, ваш фон пропадет (учтите этот момент при оптимизации отображения на мобильных устройствах, ведь безлимитный интернет не всегда есть под рукою).
  4. Для изменения цвета и/или степени прозрачности вам нужно создать новую картинку и перезалить ее на серв.

Формат системы RGBA

Одним из самых современных методов изменения транспарантности фона является применение системы RGBA.

RGBA – система представления цвета при помощи трех стандартных каналов RGB (красный, зеленый, синий), и четвертого, так называемого Alpha-канала, характеризующего степень прозрачности.

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

В уже известном нам примере, заменим содержимое в

CSS файле на следующее:

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

Важно!!!

  1. В отличии от свойства opacity прозрачность задается только фону
  2. В отличии от метода PNG картинки, для изменения цвета или степени транспарентности нам нужно просто поменять значения rgba.
  3. Кросс-браузерность. Работает во всех современных браузерах (начиная с IE9, Op10, Fx3,Sf3.2
    ).Для более старых браузеров придется либо пожертвовать прозрачностью, либо применять opacity, png методы.

Клетчатые изображения, или с уважением к истории

Этот метод стоял у истоков веб-дизайна, и видел старые-старые браузеры, которые ничего толком не умели. Он заключается в создании клетчатого фона, в котором цветные квадратики чередовались с прозрачными.

В результате применения такой картинки в качестве background получали псевдо-прозрачный фон.

Важно!!!

  1. При просмотре текста на таком фоне могут быстро уставать глаза (особенно давит рябь при прокрутке).
  2. В остальном особенности применения аналогичны с методом «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; }
.img2 { opacity: 0.5; }
.img3 { opacity: 1.0; }


код HTML

<html>

<head>

<style type=text/css>

.img1 { opacity: 0.2; }
.img2 { opacity: 0.5; }
.img3 { opacity: 1.0; }

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




Это текст, помещенный в прозрачное поле.




Попробуй сам »

Объяснение примера

Сначала мы создаем элемент

(class = «background») с фоновым изображением и рамкой.

Затем мы создаем еще один

(class = «transbox») внутри первого
.

имеют цвет фона, а границу — div прозрачен.

Внутри прозрачного

, мы добавляем текст внутри элемента

.


Проверьте себя упражнениями!



Свойство заказа CSS


Пример

Установите порядок гибких элементов:

div # myRedDIV {order: 2;}
div # myBlueDIV {order: 4;}
div # myGreenDIV {order: 3;}
div # myPinkDIV {order: 1;}

Попробуй сам »

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

Свойство order определяет порядок гибкого элемента относительно остальных гибких элементов внутри того же контейнера.

Примечание: Если элемент не является гибким, приказ собственности не имеет силы.

Значение по умолчанию: 0
Унаследовано:
Анимация: да, см. Отдельные свойства . Прочитать о animatable Попробуй
Версия: CSS3
Синтаксис JavaScript: объект .style.order = «2» Попробуй

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Числа, за которыми следует -webkit- или -moz-, указывают первую версию, которая работала с префиксом.

Имущество
заказать 29,0
21,0 -webkit-
11.0 28,0
18,0 -моз-
9,0
6,1 -webkit-
17,0


Синтаксис CSS

заказ: | начальный | наследование;

Стоимость недвижимости

.
Значение Описание
номер Значение по умолчанию 0. Задает порядок гибкого элемента
начальный Устанавливает для этого свойства значение по умолчанию.Читать о начальная
наследовать Наследует это свойство от своего родительского элемента. Читать про наследство

Связанные страницы

Ссылка CSS: свойство flex

Ссылка CSS: свойство flex-basic

Ссылка CSS: свойство flex-direction

Ссылка CSS: свойство flex-flow

Ссылка CSS: свойство flex-grow

Ссылка CSS: свойство flex-shrink

Ссылка CSS: свойство flex-wrap

Ссылка CSS: свойство align-content

Ссылка CSS: свойство align-items

Ссылка CSS: свойство align-self

Ссылка на HTML DOM: свойство заказа



Как установить непрозрачность изображений, текста и прочего в CSS

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

Источник изображения

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

Как установить прозрачность в CSS

Чтобы установить непрозрачность фона, изображения, текста или другого элемента, вы можете использовать свойство CSS opacity.Значения этого свойства варьируются от 0 до 1. Если вы установите для свойства значение 0, стилизованный элемент будет полностью прозрачным (т. Е. Невидимым). Если вы установите для свойства значение 1, элемент будет полностью непрозрачным.

Давайте посмотрим на пример того же элемента div, у которого другой стиль с помощью свойства opacity. Первый div настроен как полностью непрозрачный. Последний настроен как полностью прозрачный, поэтому вы его не видите. Разделы между ними имеют разную степень прозрачности.

Вот код:

См. Pen How to Set Opacity in CSS by Christina Perricone (@hubspot) on CodePen.

Другой способ установить непрозрачность элемента — использовать значения цвета RGBA. Мы рассмотрим этот метод ниже.

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

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

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

См. Раздел «Настройка прозрачности фона для пера с помощью свойства прозрачности CSS» Кристины Перриконе (@hubspot) на CodePen.

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

Цветовые коды

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

Для этого вы просто добавляете «a» к префиксу rgb () и добавляете четыре значения в круглых скобках. Первые три числа представляют интенсивность соответствующего основного цвета ( r ed, b lue, g reen) как целое число от 0 до 255.Четвертое значение — от 0 до 1 — устанавливает прозрачность цвета. 0 полностью прозрачен, а 1 полностью непрозрачен.

Давайте перепишем приведенный выше пример, используя свойство фона и цветовой код RGBA.

См. Раздел «Настройка прозрачности фона пера с цветовым кодом RGBA» Кристины Перриконе (@hubspot) на CodePen.

Чтобы узнать больше об этой и других цветовых моделях, ознакомьтесь с Цвета CSS: что нужно знать о значениях цветов HTML, Hex, RGB и HSL .

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

Установка непрозрачности текста в CSS почти идентична установке непрозрачности фона элемента. Вы можете установить непрозрачность всего элемента — фона, текста внутри элемента, границы и всего остального — с помощью свойства непрозрачности.

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

См. CSS «Прозрачность текста пера» Кристины Перриконе (@hubspot) на CodePen.

При настройке непрозрачности текста убедитесь, что вы поддерживаете коэффициент цветовой контрастности, чтобы все пользователи, в том числе с ограниченными возможностями, связанными со зрением, могли видеть и читать текст. Текущие рекомендации по обеспечению доступности веб-контента (WCAG) требуют соотношения 4,5: 1 для обычного текста и 3: 1 для крупного текста, такого как заголовки. Большой текст определяется как 18,66 пикселей и полужирный или больше, или 24 пикселей или больше.Большой текст определяется как текст, выделенный жирным шрифтом размером не менее 14 пунктов, или текст размером 18 пунктов.

Для получения дополнительной информации о доступности цветов см. Как определить доступные в Интернете цвета для продуктов и веб-сайтов .

Прозрачность границы CSS

Установка непрозрачности границы в CSS аналогична настройке непрозрачности текста. Если вы хотите указать непрозрачность границы элемента и ничего больше, вам нужно использовать сокращенное свойство CSS border и значения цвета RGBA.

Ниже я установлю черную и очень прозрачную границу блока div, чтобы обеспечить эффект тени.

См. Pen BaWwYVw Кристины Перриконе (@hubspot) на CodePen.

Прозрачность изображения в CSS

Вы также можете установить прозрачность изображения в CSS. Свойство opacity часто используется с селектором: hover для стилизации изображения. Таким образом, непрозрачность изображения изменится только тогда, когда пользователь наведет на него курсор. У вас есть два варианта.

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

В приведенном ниже примере вы увидите три изображения. Один установлен на 40% прозрачности, независимо от того, наводит курсор на него или нет. Один установлен на 40% прозрачности, только когда пользователь наводит на него курсор. Одна установлена ​​на 40% прозрачности, а затем меняется на 100% непрозрачность, когда пользователь наводит на нее курсор.

См. Прозрачность изображения CSS пера [с примерами при наведении] Кристины Перриконе (@hubspot) на CodePen.

Вы также можете комбинировать свойство непрозрачности со свойством анимации или перехода, чтобы создать плавный переход изображения в CSS.

Градиент непрозрачности CSS

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

Для создания этого типа градиента нельзя использовать свойство CSS opacity. Вместо этого вы должны использовать свойство background и значения цвета RGBA. Этот процесс аналогичен изменению непрозрачности фона, но вместо определения свойства фона с одним набором значений цвета RGBA вы установите для свойства значение «linear-gradient». Затем укажите направление градиента и как минимум две точки цвета в скобках. Ниже приведен пример.

См. Pen bGqoLmL Кристины Перриконе (@hubspot) на CodePen.

CSS, непрозрачность цвета

Мы уже рассмотрели несколько способов изменить непрозрачность цвета в CSS. Мы сосредоточились в первую очередь на свойстве непрозрачности и цветовой модели RGBA. Однако есть другой способ контролировать непрозрачность цвета в CSS: цвета HSL.

HSLA — это цветовая система, которая позволяет вам определять оттенок, насыщенность и яркость, а также прозрачность цвета.

HSLA форматируется аналогично цветовым кодам RGBA. Он состоит из трех чисел, разделенных запятыми.Затем эти числа заключаются в круглые скобки и им предшествует строчная буква «hsl». Вы можете добавить «a» к «hsl» и четвертое значение от 0 до 1, чтобы установить прозрачность цвета.

В то время как первые три числа цветовых кодов RGB представляют интенсивность соответствующего основного цвета, первые три числа цветовых кодов HSL представляют оттенок, насыщенность и яркость. Оттенок измеряется в градусах по шкале от 0 до 360. Установка оттенка 0 или 360 — красный, 120 — зеленый, 240 — синий. Насыщенность и яркость измеряются в процентах по шкале от 0 до 100.Насыщенность, установленная на 0%, представляет собой оттенок серого, а 100% — это полный цвет. Для яркости установлено значение 0% — черный, а 100% — белый.

В приведенном ниже примере я установил цвет одного блока div, но не добавил альфа-параметр. В результате по умолчанию он полностью непрозрачен. Я установил цвет и непрозрачность другого блока таким образом, чтобы он был прозрачным на 50%.

См. Статью Кристины Перриконе (@hubspot) на CodePen в статье «Настройка пера для прозрачности цвета CSS с помощью цветов HSL».

Обратите внимание, что текст, содержащийся в div, не изменяется, поэтому его легко читать.Вот почему вы можете изменить значения RGBA, используемые в любом из приведенных выше примеров, для соответствующих значений HSLA и добиться того же результата.

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

Если вы хотите создать контраст и сделать текст заметным на своем веб-сайте, вы можете использовать свойство прозрачности CSS — или значения цвета RGBA или HSLA — для управления непрозрачностью различных элементов на странице. Вам просто нужно немного ознакомиться с HTML и CSS.

Прозрачность изображения CSS (непрозрачность)

Прозрачность изображения CSS (прозрачность)

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

div { непрозрачность: 0,6; }

Уровень непрозрачности описывает уровень прозрачности, он варьируется от 0,0 до 1,0. Уровень 0,0 полностью прозрачен, 0,5 — прозрачность 50%, а уровень 1,0 — непрозрачен. Непрозрачность имеет начальное значение по умолчанию 1 (непрозрачность 100%).


Создание прозрачного изображения

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

Первое изображение имеет уровень непрозрачности 1.0, а второе изображение — уровень непрозрачности 0.3.

Исходный код

Во всех современных веб-браузерах реализовано очень простое свойство непрозрачности CSS, поэтому код для конкретного браузера не требуется. Но IE8 и более ранние версии используют filter: alpha (opacity = x). X может принимать значение от 0 до 100.Значение 50 означает 50% прозрачности.

Как создать прозрачный цвет Div

Вы можете создать прозрачный фоновый элемент Div, используя свойство CSS Opacity.

Первый div имеет уровень прозрачности 1. и отправляет div с уровнем 0,5.

Исходный код

непрозрачность 1.0

непрозрачность 0,5

Прозрачная рамка

В CSS вы можете сделать границу изображения прозрачной.

Исходный код

прозрачная коробка

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

Исходный код

прозрачный текст

Следующая программа использует хитрый способ отображения текста как прозрачного.

Исходный код


Утка


CSS: свойство непрозрачности

В этом руководстве по CSS объясняется, как использовать свойство CSS под названием opacity с синтаксисом и примерами.

Описание

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

Синтаксис

Синтаксис CSS-свойства opacity:

.
  непрозрачность: значение;  

Параметры или аргументы

значение

Уровень прозрачности элемента. Это может быть одно из следующих значений:

Значение Описание
номер Значение от 1.0 и 0,0.
div {непрозрачность: 0,5; }
наследовать Указывает, что элемент унаследует непрозрачность от своего родительского элемента.
div {opacity: inherit; }

Совместимость с браузером

Свойство непрозрачности CSS имеет базовую поддержку в следующих браузерах:

  • Хром 1+
  • Android 1+
  • Firefox 1+ (Gecko 1.7+)
  • Firefox Mobile 1.0+ (Gecko 1.7+)
  • Internet Explorer 9+ (IE 9+)
  • IE Телефон 9+
  • Опера 9+
  • Opera Mobile 9+
  • Safari 1.2 (WebKit)
  • Safari Mobile 3.2

Пример

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

непрозрачный

Давайте рассмотрим пример, в котором мы устанавливаем непрозрачность равной 1, что делает элемент непрозрачным.

CSS будет выглядеть так:

  div {border: 2px сплошной красный; фон: светло-желтый; отступ: 10 пикселей; }

p {border: 3px сплошной синий; фон: светло-голубой; непрозрачность: 1; }  

HTML будет выглядеть так:

  

Это первый абзац, написанный techonthenet.com.

Это второй абзац, написанный techonthenet.com.

Результат будет выглядеть так:

В этом примере непрозрачности CSS мы установили непрозрачность на 1 для тега

, что означает, что элемент

полностью сплошной без степени прозрачности.

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

Теперь возьмем тот же пример и применим уровень прозрачности к тегу

, чтобы сделать его полупрозрачным.

CSS будет выглядеть так:

  div {border: 2px сплошной красный; фон: светло-желтый; отступ: 10 пикселей; }

p {border: 3px сплошной синий; фон: светло-голубой; непрозрачность: 0,5; }  

HTML будет выглядеть так:

  

Это первый абзац, написанный techonthenet.com.

Это второй абзац, написанный techonthenet.com.

Результат будет выглядеть так:

В этом примере непрозрачности CSS мы установили для свойства opacity тега

значение 0,5, что делает элемент

полупрозрачным. Это приводит к частичному просвечиванию фона за тегом

.

Как вы можете видеть, синяя граница и светло-голубой фон тега

становятся зелеными, а желтый фон тега

начинает просвечивать.

Полностью прозрачный

Наконец, давайте возьмем наш пример и сделаем наш элемент полностью прозрачным или невидимым.

CSS будет выглядеть так:

  div {border: 2px сплошной красный; фон: светло-желтый; отступ: 10 пикселей; }

p {border: 3px сплошной синий; фон: светло-голубой; непрозрачность: 0; }  

HTML будет выглядеть так:

  

Это первый абзац, написанный techonthenet.com.

Это второй абзац, написанный techonthenet.com.

Результат будет выглядеть так:

В этом примере непрозрачности CSS мы установили для свойства opacity значение 0 для тега

, что делает элемент

полностью прозрачным или невидимым.

Непрозрачность

· Документы WebPlatform

Сводка

Свойство opacity управляет прозрачностью и непрозрачностью элемента. Его значения варьируются от 0 до 1. Если исходить из значений по умолчанию на родительском уровне, элемент с непрозрачностью 1 полностью непрозрачен, а элемент с непрозрачностью 0 полностью прозрачен.Прозрачность, используемая при рендеринге элемента, является продуктом его непрозрачности и непрозрачности его предков.

Обзорная таблица

Начальное значение
1
Применимо к
Все элементы
Унаследовано
Нет
Медиа
визуальный
Расчетное значение
[[Вычисленное значение :: То же, что и указанное значение после отсечения до диапазона [0.0,1.0]]]
Анимированные
Да
Свойство объектной модели CSS
непрозрачность
В процентах
НЕТ

Синтаксис

  • непрозрачность: значение альфа
  • непрозрачность: наследовать

Значения

значение альфа
Значение с плавающей запятой от 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный) включительно. Любые значения вне диапазона будут ограничены этим диапазоном.
наследовать
Указывает, что свойство принимает то же вычисленное значение, что и свойство родительского элемента.

Примеры

  .example1 {
  непрозрачность: 0,5;
}
  

Посмотреть живой пример

Использование

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

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

Банкноты

Параметр непрозрачности применяется равномерно ко всему объекту. Любые значения вне диапазона от 0,0 до 1,0 будут ограничены этим диапазоном.

Непрозрачность объекта или группы концептуально можно рассматривать как операцию постобработки. По сути, после рендеринга объекта или группы в закадровое изображение RGBA параметр непрозрачности объекта или группы указывает, как смешать закадровое изображение с текущим фоном.

Обратите внимание, что установка для этого свойства значения меньше 1 создает новый контекст наложения. Для получения дополнительной информации см. «Что никто не сказал вам о Z-Index» Филиппа Уолтона.

Связанные спецификации

Цветовой модуль CSS, уровень 3
Рекомендация

См. Также

Статьи по теме

Визуальные эффекты

Связанные страницы

Атрибуции

Как установить прозрачность фонового изображения в CSS?

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

Подход: Мы можем использовать свойство непрозрачности в CSS, которое используется для изменения непрозрачности элемента. Значение свойства может быть установлено в диапазоне от 0 до 1, где «0» означает полную прозрачность, а «1» — непрозрачность. Между ними можно использовать любое десятичное значение, чтобы соответственно установить непрозрачность.

Синтаксис:

 непрозрачность: значение; 

Пример: В этом примере мы установим фоновое изображение на

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

HTML

< html >

0004 000 000 000 000 title >

Как изменить прозрачность

фонового изображения в CSS?

титул >

< стиль >

G

дисплей: гибкий;

align-items: center;

justify-content: center;

}

#GFG :: до {

содержание: "";

позиция: абсолютная;

верх: 0px;

справа: 0px;

внизу: 0px;

слева: 0px;

/ * Укажите используемое фоновое изображение * /

background-image: url (

background-size: cover;

/ * Укажите фоновое изображение * /

непрозрачность: 0.

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

Ваш адрес email не будет опубликован.