Свойства CSS, связанные с прозрачностью

Articles

В этой статье объясняются свойства CSS, связанные с прозрачностью.

Вы можете узнать о применении и синтаксисе свойств opacity, z-index и clip-path.

YouTube Video

HTML для предварительного просмотра

css-opacity.html

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-opacity.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties Related to Transparency</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>CSS Properties Related to Transparency</h2>
20        </header>
21        <article>
22            <h3>opacity</h3>
23            <section>
24                <header><h4>opacity: 1</h4></header>
25                <section class="sample-view">
26                    <div class="opaque-box">Opaque</div>
27                </section>
28                <header><h4>opacity: 0.5</h4></header>
29                <section class="sample-view">
30                    <div class="semi-transparent-box">Semi-transparent</div>
31                </section>
32                <header><h4>opacity: 0</h4></header>
33                <section class="sample-view">
34                    <div class="transparent-box">Transparent</div>
35                </section>
36                <header><h4>transition: opacity 2s ease-in-out</h4></header>
37                <section class="sample-view">
38                    <div class="opacity-transition-box">Opacity with Transition (Fade out on hover)</div>
39                </section>
40                <header><h4>Parent & Child Element</h4></header>
41                <section class="sample-view">
42                    <div class="opacity-parent">
43                        Parent Element & <span class="opacity-child">Child Element</span>
44                    </div>
45                </section>
46            </section>
47        </article>
48        <article>
49            <h3>z-index</h3>
50            <section>
51                <div class="z-index-box1">1</div>
52                <div class="z-index-box2">
53                    <div class="z-index-box2-1">2-1</div>
54                    2
55                </div>
56                <div class="z-index-box3">3</div>
57            </section>
58        </article>
59        <article>
60            <h3>clip-path</h3>
61            <section>
62                <h4>Clip-path Property Examples</h4>
63                <header><h4>clip-path: circle(50% at 50% 50%)</h4></header>
64                <section class="sample-view">
65                    <div class="clip-path-circle">Circle</div>
66                </section>
67                <header><h4>clip-path: ellipse(50% 30% at 50% 50%)</h4></header>
68                <section class="sample-view">
69                    <div class="clip-path-ellipse">Ellipse</div>
70                </section>
71                <header><h4>clip-path: polygon(50% 0%, 100% 100%, 0% 100%)</h4></header>
72                <section class="sample-view">
73                    <div class="clip-path-polygon">Polygon</div>
74                </section>
75                <header><h4>clip-path: inset(10% 20% 30% 40%)</h4></header>
76                <section class="sample-view">
77                    <div class="clip-path-inset">Inset</div>
78                </section>
79                <header><h4>clip-path: url(#myClip)</h4></header>
80                <section class="sample-view">
81                    <div class="clip-path-url">Url</div>
82                </section>
83            </section>
84            <svg width="0" height="0">
85                <clipPath id="myClip">
86                    <circle cx="50" cy="50" r="40" />
87                </clipPath>
88            </svg>
89        </article>
90    </main>
91</body>
92</html>

Фильтры

Свойство `opacity`

 1.opaque-box {
 2    background-color: skyblue;
 3    opacity: 1; /* completely opaque */
 4    border: 1px solid black;
 5}
 6
 7.semi-transparent-box {
 8    background-color: skyblue;
 9    opacity: 0.5; /* semi-transparent */
10    border: 1px solid black;
11}
12
13.transparent-box {
14    background-color: skyblue;
15    opacity: 0; /* completely transparent */
16    border: 1px solid black;
17}
18
19.opacity-transition-box {
20    background-color: orange;
21    transition: opacity 2s ease-in-out;
22    border: 1px solid black;
23}
24
25.opacity-transition-box:hover {
26    opacity: 0; /* Fade out on hover */
27}
28
29.opacity-parent {
30    background-color: blue;
31    opacity: 0.5;
32}
33
34.opacity-child {
35    background-color: red;
36}

Свойство opacity используется для установки прозрачности элемента. Это свойство задаёт непрозрачность всего элемента: чем ближе значение к 0, тем больше прозрачность, а чем ближе к 1 — тем меньше прозрачность. Свойство opacity можно использовать с анимациями для создания эффектов появления и затухания.

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

В этом примере настройки заданы следующим образом.

Когда свойство opacity установлено в 1, элемент полностью непрозрачен, как обычный элемент.
Когда свойство opacity установлено в 0.5, элемент становится полупрозрачным.
Когда свойство opacity установлено в 0, элемент становится полностью прозрачным и совершенно невиден.
Свойство transition установлено в opacity, поэтому когда курсор мыши наводится на элемент, он постепенно исчезает и становится полностью прозрачным через 2 секунды.
Если у родительского элемента свойство opacity установлено в 0.5, дочерние элементы также становятся полупрозрачными.

Свойство `z-index`

 1.z-index-box1 {
 2    position: relative;
 3    width: 100px;
 4    height: 100px;
 5    background-color: red;
 6    top: 10px;
 7    left: 10px;
 8    z-index: 1; /* Displayed in the foreground */
 9}
10
11.z-index-box2 {
12    position: relative;
13    width: 100px;
14    height: 100px;
15    background-color: blue;
16    top: -100px;
17    left: 90px;
18    z-index: 0; /* Displayed in the background */
19}
20
21.z-index-box3 {
22    position: relative;
23    width: 100px;
24    height: 100px;
25    background-color: green;
26    top: -160px;
27    left: 80px;
28    z-index: 2; /* Displayed in the frontmost layer */
29}
30
31.z-index-box2-1 {
32    position: relative;
33    width: 50px;
34    height: 50px;
35    background-color: skyblue;
36    top: 0px;
37    left: 0px;
38    z-index: 4;
39}

Свойство z-index используется в CSS для управления порядком наложения элементов. Это свойство определяет, должен ли элемент отображаться перед или за другими элементами.

В красном блоке свойство z-index установлено в 1, поэтому элемент отображается перед другими элементами.
В синем блоке свойство z-index установлено в 0, поэтому элемент отображается за красным блоком.
В зелёном блоке свойство z-index установлено в 2, и он отображается на самом переднем плане.
В голубом блоке задан наибольший z-index со значением 4, но поскольку у родительского элемента z-index равен 0, он не отображается на самом переднем плане.

Основной механизм

Свойство z-index принимает числовое значение, где элементы с большими числами отображаются перед элементами с меньшими числами. По умолчанию, элементы без указанного z-index располагаются в том порядке, в котором они появляются в HTML.

Однако, чтобы z-index вступил в действие, свойство position элемента должно быть установлено в значение relative, absolute, fixed или sticky. Если значение свойства position - static, то z-index не оказывает никакого влияния.

Значения

Если z-index задаётся положительным числом, элемент будет отображаться ближе к переднему плану. Чем больше число, тем больше элемент «выступает» перед другими элементами.
- Если z-index установлен в 0, соблюдается стандартный порядок наложения.
- Если z-index установлен в 1, элемент отображается на один слой выше других элементов.
Если z-index задаётся отрицательным числом, элемент будет отображаться ближе к заднему плану. Чем меньше число, тем больше элемент «скрывается» за другими элементами.
- Если z-index установлен в -1, элемент отображается на один слой ниже других элементов.

Примечания

z-index зависит от z-index родительского элемента. Когда у родительского элемента задан z-index, он определяет относительный порядок наложения внутри этого элемента. Это называется контекстом наложения. Таким образом, даже если у дочернего элемента высокий z-index, но у родительского элемента низкий z-index, он не будет отображаться поверх других элементов.

Свойство `clip-path`

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

Свойство clip-path ограничивает область отображения элемента и скрывает части, находящиеся за пределами заданной формы. Далее мы объясним, как задавать наиболее часто используемые формы.

Основные формы обрезки

`circle()`

1.clip-path-circle {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: circle(50% at 50% 50%);
6}

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

Первый 50% — это радиус круга (в процентах от ширины или высоты элемента).
Последующий at 50% 50% — это положение центра круга (в процентах от ширины и высоты элемента).

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

`ellipse()`

1.clip-path-ellipse {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: ellipse(50% 30% at 50% 50%);
6}

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

Первый 50% 30% — это радиусы ширины и высоты.
Последующий at 50% 50% — это положение центра эллипса.

В этом примере задается эллипс, расположенный по центру элемента, с шириной 50% и высотой 30%.

`polygon()`

1.clip-path-polygon {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
6}

polygon() формирует многоугольник, соединяя заданный набор вершин. Каждая вершина задается относительными координатами внутри элемента.

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

`inset()`

1.clip-path-inset {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: inset(10% 20% 30% 40%);
6}

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

10% — это расстояние от верхнего края.
20% — это расстояние от правого края.
30% — это расстояние от нижнего края.
40% — это расстояние от левого края.

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

`clip-path` с использованием SVG

 1/*
 2<svg width="0" height="0">
 3  <clipPath id="myClip">
 4    <circle cx="50" cy="50" r="40" />
 5  </clipPath>
 6</svg>
 7*/
 8.clip-path-url {
 9    width: 100px;
10    height: 100px;
11    background-color: green;
12    clip-path: url(#myClip);
13}

CSS clip-path может использовать не только примитивные формы, но и обрезать сложные формы с использованием элемента SVG <clipPath>.

В этом примере к HTML-элементу применяется круговой обтравочный путь, определённый в SVG с id равным myClip.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Свойства `object-fit` и `object-position`Свойства CSS, связанные с эффектами фильтра

Свойства CSS, связанные с прозрачностью

YouTube Video

HTML для предварительного просмотра

Фильтры

Свойство opacity

Свойство z-index

Основной механизм

Значения

Примечания

Свойство clip-path

Основные формы обрезки

circle()

ellipse()

polygon()

inset()

clip-path с использованием SVG

YouTube Video

Свойство `opacity`

Свойство `z-index`

Свойство `clip-path`

`circle()`

`ellipse()`

`polygon()`

`inset()`

`clip-path` с использованием SVG