CSS-Eigenschaften in Bezug auf Transparenz

Articles

In diesem Artikel werden die CSS-Eigenschaften in Bezug auf Transparenz erläutert.

Sie können die Verwendung und Syntax der Eigenschaften opacity, z-index und clip-path lernen.

YouTube Video

HTML zur Vorschau

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>

Filtereffekte

`opacity`-Eigenschaft

 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}

Die opacity-Eigenschaft wird verwendet, um die Transparenz eines Elements festzulegen. Diese Eigenschaft gibt die Transparenz des gesamten Elements an, wobei Werte näher an 0 transparenter und Werte näher an 1 undurchsichtiger sind. Die opacity-Eigenschaft kann mit Animationen kombiniert werden, um Ein- und Ausblendeffekte zu erzeugen.

Die opacity-Eigenschaft beeinflusst nicht nur das Element, auf das sie angewendet wird, sondern auch dessen Kindelemente. Das bedeutet, dass Kindelemente die Transparenz eines halbtransparenten Elternelements erben.

In diesem Beispiel sind die Einstellungen wie folgt konfiguriert.

Wenn die Eigenschaft opacity auf 1 gesetzt ist, ist das Element vollständig undurchsichtig, genau wie ein normales Element.
Wenn die Eigenschaft opacity auf 0.5 gesetzt ist, wird das Element halbtransparent.
Wenn die Eigenschaft opacity auf 0 gesetzt ist, wird das Element völlig transparent und ist überhaupt nicht sichtbar.
Die Eigenschaft transition ist auf opacity gesetzt, sodass das Element ausgeblendet wird und nach 2 Sekunden vollständig transparent ist, wenn der Mauszeiger darüber schwebt.
Wenn das übergeordnete Element eine opacity-Eigenschaft von 0.5 hat, werden auch die Kindelemente halbtransparent.

`z-index`-Eigenschaft

 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}

Die z-index-Eigenschaft wird in CSS verwendet, um die Stapelreihenfolge von Elementen zu steuern. Diese Eigenschaft legt fest, ob ein Element vor oder hinter anderen Elementen angezeigt werden soll.

Im roten Kasten ist der z-index auf 1 gesetzt, sodass das Element vor anderen Elementen erscheint.
Im blauen Kasten ist der z-index auf 0 gesetzt, sodass das Element hinter dem roten Kasten erscheint.
Im grünen Kasten ist der z-index auf 2 gesetzt, und das Element erscheint an vorderster Position.
Im hellblauen Kasten ist der höchste z-index von 4 angegeben, aber da das übergeordnete Element einen z-index von 0 hat, erscheint es nicht an der vordersten Position.

Grundmechanismus

Die Eigenschaft z-index nimmt einen numerischen Wert an, wobei Elemente mit höheren Zahlen vor denen mit kleineren Zahlen angezeigt werden. Standardmäßig werden Elemente ohne angegebenen z-index entsprechend der Reihenfolge gestapelt, in der sie im HTML erscheinen.

Damit der z-index wirksam wird, muss die position-Eigenschaft des Elements auf relative, absolute, fixed oder sticky gesetzt sein. Wenn die position static ist, hat der z-index keine Wirkung.

Werte

Wenn eine positive ganze Zahl für den z-index angegeben wird, wird das Element weiter vorne angezeigt. Je größer die Zahl, desto weiter vorne wird das Element vor anderen Elementen angezeigt.
- Wenn der z-index auf 0 gesetzt ist, wird die standardmäßige Stapelreihenfolge beibehalten.
- Wenn der z-index auf 1 gesetzt ist, wird das Element eine Ebene vor anderen Elementen angezeigt.
Wenn eine negative ganze Zahl für den z-index angegeben wird, wird das Element weiter hinten angezeigt. Je kleiner die Zahl, desto weiter hinten wird das Element hinter anderen Elementen angezeigt.
- Wenn der z-index auf -1 gesetzt ist, wird das Element eine Ebene hinter anderen Elementen angezeigt.

Notizen

z-index hängt vom z-index des übergeordneten Elements ab. Wenn ein übergeordnetes Element einen z-index angegeben hat, wird die relative Stapelreihenfolge innerhalb dieses übergeordneten Elements angewendet. Dies wird als Stapelkontext bezeichnet. Selbst wenn ein Kindelement einen hohen z-index hat, wird es nicht vor anderen Elementen angezeigt, wenn der z-index des übergeordneten Elements niedrig ist.

Die Eigenschaft `clip-path`

Die CSS-Eigenschaft clip-path wird verwendet, um Elemente in bestimmte Formen zu schneiden. Normalerweise werden Elemente als rechteckige Kästen angezeigt, aber mit clip-path können Elemente in komplexen Formen wie Kreisen oder Polygonen angezeigt werden. Es ist ein sehr nützliches Werkzeug für die Erstellung visueller Designs oder interaktiver Effekte.

Die Eigenschaft clip-path beschränkt den Anzeigebereich eines Elements und verbirgt die Teile außerhalb der angegebenen Form. Als Nächstes erklären wir, wie häufig verwendete Formen angegeben werden können.

Hauptschnittformen

`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() schneidet ein Element in eine kreisförmige Form. Sie können die Form steuern, indem Sie das Zentrum und den Radius des Kreises angeben.

Die erste Angabe 50% entspricht dem Radius des Kreises (als Prozentsatz der Breite oder Höhe des Elements).
Die folgende Angabe at 50% 50% gibt die Position des Kreiszentrums (als Prozentsatz der Breite und Höhe des Elements) an.

Hier wird ein Kreis mit einem Radius angegeben, der der Hälfte der Abmessungen des Elements entspricht und in der Mitte des Elements zentriert ist.

`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() schneidet ein Element in eine elliptische Form. Sie geben die Radien für Breite und Höhe sowie die Position des Zentrums an.

Die erste Angabe 50% 30% entspricht den Radien für die Breite und Höhe.
Die folgende Angabe at 50% 50% gibt die Position des Ellipsenzentrums an.

In diesem Beispiel wird eine Ellipse spezifiziert, die in der Mitte des Elements liegt, mit einer Breite von 50% und einer Höhe von 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() bildet ein Polygon, indem eine angegebene Menge an Eckpunkten verbunden wird. Jeder Eckpunkt wird mit relativen Koordinaten innerhalb des Elements angegeben.

In diesem Beispiel werden drei Eckpunkte (oben Mitte, unten rechts, unten links) angegeben, wodurch ein Dreieck entsteht. polygon() ist sehr flexibel und kann jede beliebige Form erstellen.

`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() schneidet von den äußeren Kanten eines Elements nach innen. Definieren Sie ein Rechteck, indem Sie den Abstand von jeder der vier Seiten angeben.

10% ist der Abstand von der oberen Kante.
20% ist der Abstand von der rechten Kante.
30% ist der Abstand von der unteren Kante.
40% ist der Abstand von der linken Kante.

Diese Spezifikation erstellt ein Rechteck, das innerhalb des Elements kleiner wird.

`clip-path` mit SVG verwenden

 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}

Mit CSS clip-path können nicht nur primitive Formen, sondern auch komplexe Formen mit einem SVG-Element <clipPath> zugeschnitten werden.

In diesem Beispiel wird ein kreisfördiger Clip-Pfad, der im SVG mit der id „myClip“ definiert ist, auf ein HTML-Element angewendet.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

`object-fit`- und `object-position`-Eigenschaften CSS-Eigenschaften im Zusammenhang mit Filtereffekten

CSS-Eigenschaften in Bezug auf Transparenz

YouTube Video

HTML zur Vorschau

Filtereffekte

opacity-Eigenschaft

z-index-Eigenschaft

Grundmechanismus

Werte

Notizen

Die Eigenschaft clip-path

Hauptschnittformen

circle()

ellipse()

polygon()

inset()

clip-path mit SVG verwenden

YouTube Video

`opacity`-Eigenschaft

`z-index`-Eigenschaft

Die Eigenschaft `clip-path`

`circle()`

`ellipse()`

`polygon()`

`inset()`

`clip-path` mit SVG verwenden