Właściwości CSS związane z przezroczystością

Articles

Ten artykuł wyjaśnia właściwości CSS związane z przezroczystością.

Możesz dowiedzieć się o użyciu i składni właściwości opacity, z-index i clip-path.

YouTube Video

HTML do podglądu

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>

Efekty filtra

Właściwość `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}

Właściwość opacity służy do ustawiania przezroczystości elementu. Ta właściwość określa przezroczystość całego elementu, gdzie wartości bliższe 0 oznaczają większą przezroczystość, a wartości bliższe 1 większą nieprzezroczystość. Właściwość opacity można łączyć z animacjami, aby tworzyć efekty znikania i pojawiania się.

Właściwość opacity wpływa nie tylko na element, na który jest ustawiona, ale także na jego elementy potomne. Oznacza to, że jeśli element nadrzędny jest ustawiony jako półprzezroczysty, jego elementy potomne odziedziczą tę przezroczystość.

W tym przykładzie ustawienia są skonfigurowane w następujący sposób.

Gdy właściwość opacity jest ustawiona na 1, element jest całkowicie nieprzezroczysty, tak jak normalny element.
Gdy właściwość opacity jest ustawiona na 0.5, element staje się półprzezroczysty.
Gdy właściwość opacity jest ustawiona na 0, element staje się całkowicie przezroczysty i w ogóle nie jest widoczny.
Właściwość transition jest ustawiona na opacity, więc gdy kursor myszy najeżdża na element, zanika on i po 2 sekundach staje się całkowicie przezroczysty.
Jeśli element nadrzędny ma właściwość opacity ustawioną na 0.5, elementy podrzędne również stają się półprzezroczyste.

Właściwość `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 to właściwość używana w CSS do kontrolowania kolejności nakładania elementów. Ta właściwość określa, czy element powinien pojawić się przed innymi elementami, czy za nimi.

W czerwonym polu właściwość z-index jest ustawiona na 1, więc element pojawia się przed innymi elementami.
W niebieskim polu właściwość z-index jest ustawiona na 0, więc element pojawia się za czerwonym polem.
W zielonym polu właściwość z-index jest ustawiona na 2 i element ten pojawia się na najbardziej przedniej pozycji.
W jasnoniebieskim polu ustawiono najwyższy z-index o wartości 4, ale ponieważ element nadrzędny ma z-index ustawiony na 0, nie pojawia się on na najbardziej przedniej pozycji.

Podstawowy mechanizm

Właściwość z-index przyjmuje wartość liczbową, gdzie elementy z wyższymi liczbami są wyświetlane przed tymi z niższymi liczbami. Domyślnie elementy bez określonego z-index układają się w kolejności, w jakiej pojawiają się w HTML.

Jednak, aby z-index działał, element musi mieć ustawioną właściwość position na relative, absolute, fixed lub sticky. Jeśli wartość position wynosi static, z-index nie ma wpływu.

Wartości

Jeśli z-index ma wartość dodatnią, element jest wyświetlany bliżej przodu. Im większa liczba, tym bardziej element jest wyświetlany przed innymi elementami.
- Jeśli z-index jest ustawiony na 0, zachowuje domyślną kolejność układania.
- Jeśli z-index jest ustawiony na 1, element jest wyświetlany jedną warstwę przed innymi elementami.
Jeśli z-index ma wartość ujemną, element jest wyświetlany bardziej z tyłu. Im mniejsza liczba, tym bardziej element jest wyświetlany za innymi elementami.
- Jeśli z-index jest ustawiony na -1, element jest wyświetlany jedną warstwę za innymi elementami.

Notatki

z-index zależy od z-index elementu nadrzędnego. Gdy element nadrzędny ma określony z-index, stosowana jest względna kolejność układania w obrębie tego elementu nadrzędnego. To nazywa się kontekstem układania. Dlatego nawet jeśli element podrzędny ma wysoki z-index, to jeśli z-index elementu nadrzędnego jest niski, nie będzie się on pojawiał przed innymi elementami.

Właściwość `clip-path`

Właściwość CSS clip-path służy do przycinania elementów w określone kształty. Normalnie elementy są wyświetlane jako prostokątne ramki, ale dzięki clip-path mogą być wyświetlane w bardziej złożonych kształtach, takich jak koła lub wielokąty. Jest to bardzo przydatne narzędzie do tworzenia projektów graficznych lub efektów interaktywnych.

Właściwość clip-path ogranicza obszar wyświetlania elementu i ukrywa części leżące poza określonym kształtem. Następnie wyjaśnimy, jak definiować często używane kształty.

Główne kształty przycinania

`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() przycina element do okrągłego kształtu. Możesz kontrolować kształt, określając środek i promień koła.

Pierwsze 50% to promień koła (jako procent szerokości lub wysokości elementu).
Kolejne at 50% 50% to pozycja środka koła (jako procent szerokości i wysokości elementu).

Tutaj określono koło o promieniu równym połowie wymiarów elementu, umieszczone centralnie w elemencie.

`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() przycina element, nadając mu kształt elipsy. Określasz promienie szerokości i wysokości oraz pozycję środka.

Pierwsze 50% 30% to promienie szerokości i wysokości.
Kolejne at 50% 50% to pozycja środka elipsy.

W tym przykładzie określono elipsę umieszczoną centralnie w elemencie, o szerokości 50% i wysokości 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() tworzy wielokąt, łącząc określony zestaw wierzchołków. Każdy wierzchołek jest określony za pomocą współrzędnych względnych w obrębie elementu.

W tym przykładzie określono trzy wierzchołki (góra środek, dół prawy, dół lewy) i przycina do trójkąta. polygon() jest bardzo elastyczny i może tworzyć dowolny kształt.

`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() przycina element do wewnątrz od jego zewnętrznych krawędzi. Zdefiniuj prostokąt, określając odległość od każdej z czterech krawędzi.

10% to odległość od górnej krawędzi.
20% to odległość od prawej krawędzi.
30% to odległość od dolnej krawędzi.
40% to odległość od lewej krawędzi.

Ta specyfikacja tworzy prostokąt, który zmniejsza się wewnątrz elementu.

`clip-path` wykorzystujący 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 może używać nie tylko kształtów prymitywnych, ale także przycinać złożone kształty za pomocą elementu SVG <clipPath>.

W tym przykładzie do elementu HTML zastosowano okrągłą ścieżkę przycinania zdefiniowaną w SVG z identyfikatorem myClip.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

`object-fit` i `object-position` właściwości Właściwości CSS związane z efektami filtrów

Właściwości CSS związane z przezroczystością

YouTube Video

HTML do podglądu

Efekty filtra

Właściwość opacity

Właściwość z-index

Podstawowy mechanizm

Wartości

Notatki

Właściwość clip-path

Główne kształty przycinania

circle()

ellipse()

polygon()

inset()

clip-path wykorzystujący SVG

YouTube Video

Właściwość `opacity`

Właściwość `z-index`

Właściwość `clip-path`

`circle()`

`ellipse()`

`polygon()`

`inset()`

`clip-path` wykorzystujący SVG