CSS-eigenschappen met betrekking tot transparantie

Articles

Dit artikel legt de CSS-eigenschappen uit die betrekking hebben op transparantie.

U kunt meer leren over het gebruik en de syntax van de eigenschappen opacity, z-index en clip-path.

YouTube Video

HTML voor Voorbeeldweergave

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>

Filtereffecten

`opacity`-eigenschap

 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}

De opacity-eigenschap wordt gebruikt om de transparantie van een element in te stellen. Deze eigenschap specificeert de opaciteit van het hele element, waarbij waarden dichter bij 0 meer transparant zijn en waarden dichter bij 1 meer ondoorzichtig. De opacity-eigenschap kan gecombineerd worden met animaties om in- en uitfadingseffecten te creëren.

De opacity-eigenschap beïnvloedt niet alleen het element waarop het is ingesteld, maar ook de kindelementen. Dit betekent dat als een bovenliggende element semi-transparant wordt gemaakt, de kindelementen deze transparantie erven.

In dit voorbeeld zijn de instellingen als volgt geconfigureerd.

Wanneer de eigenschap opacity is ingesteld op 1, is het element volledig ondoorzichtig, net als een normaal element.
Wanneer de eigenschap opacity is ingesteld op 0,5, wordt het element half transparant.
Wanneer de eigenschap opacity is ingesteld op 0, wordt het element volledig transparant en is helemaal niet zichtbaar.
De eigenschap transition is ingesteld op opacity, dus wanneer de muiscursor over het element beweegt, vervaagt het en wordt het na 2 seconden volledig transparant.
Als het bovenliggende element een opacity-waarde van 0,5 heeft, worden de onderliggende elementen ook half transparant.

`z-index`-eigenschap

 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}

De z-index is een eigenschap in CSS die wordt gebruikt om de stapelvolgorde van elementen te regelen. Deze eigenschap specificeert of een element voor of achter andere elementen moet verschijnen.

In het rode vak is de z-index ingesteld op 1, waardoor het element voor andere elementen wordt weergegeven.
In het blauwe vak is de z-index ingesteld op 0, waardoor het element achter het rode vak verschijnt.
In het groene vak is de z-index ingesteld op 2 en verschijnt het volledig vooraan.
In het lichtblauwe vak is een hoogste z-index van 4 opgegeven, maar omdat het bovenliggende element een z-index van 0 heeft, verschijnt het niet helemaal vooraan.

Basismechanisme

De eigenschap z-index neemt een numerieke waarde aan, waarbij elementen met hogere nummers vóór elementen met lagere nummers worden weergegeven. Standaard worden elementen zonder een gespecificeerde z-index gestapeld in de volgorde waarin ze in de HTML verschijnen.

Voor de z-index om effect te hebben, moet de eigenschap position van het element zijn ingesteld op relative, absolute, fixed of sticky. Als de position is ingesteld op static, heeft de z-index geen effect.

Waarden

Als een positief geheel getal wordt toegewezen aan z-index, wordt het element meer naar voren weergegeven. Hoe groter het nummer, hoe meer het vóór andere elementen wordt weergegeven.
- Als z-index is ingesteld op 0, wordt de standaard stapelvolgorde aangehouden.
- Als z-index is ingesteld op 1, wordt het element één laag vóór andere elementen weergegeven.
Als een negatief geheel getal wordt toegewezen aan z-index, wordt het element meer naar achteren weergegeven. Hoe kleiner het nummer, hoe meer het achter andere elementen wordt weergegeven.
- Als z-index is ingesteld op -1, wordt het element één laag achter andere elementen weergegeven.

Notities

z-index is afhankelijk van de z-index van het bovenliggende element. Wanneer een bovenliggend element een gespecificeerde z-index heeft, wordt de relatieve stapelvolgorde binnen dat element toegepast. Dit wordt een stapelcontext genoemd. Daarom, zelfs als een onderliggend element een hoge z-index heeft, zal het niet vóór andere elementen verschijnen als de z-index van het bovenliggende element laag is.

De eigenschap `clip-path`

De CSS-eigenschap clip-path wordt gebruikt om elementen in specifieke vormen te knippen. Normaal gesproken worden elementen weergegeven als rechthoekige vakken, maar met clip-path kunnen elementen worden weergegeven in complexe vormen zoals cirkels of polygonen. Het is een zeer nuttige tool voor het maken van visuele ontwerpen of interactieve effecten.

De eigenschap clip-path beperkt het weergavegebied van een element en verbergt de delen buiten de gespecificeerde vorm. Vervolgens leggen we uit hoe vaak gebruikte vormen kunnen worden gespecificeerd.

Belangrijkste uitsnijvormen

`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() knipt een element in een cirkelvorm. Je kunt de vorm regelen door het midden en de straal van de cirkel op te geven.

De eerste 50% is de straal van de cirkel (als een percentage van de breedte of hoogte van het element).
De daaropvolgende at 50% 50% is de middenpositie van de cirkel (als een percentage van de breedte en hoogte van het element).

Hier specificeert het een cirkel met een straal die de helft is van de afmetingen van het element, gecentreerd in het element.

`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() knipt een element in een elliptische vorm. Je specificeert de stralen van de breedte en hoogte, evenals de middenpositie.

De eerste 50% 30% zijn de stralen van de breedte en hoogte.
De daaropvolgende at 50% 50% is de middenpositie van de ellips.

In dit voorbeeld specificeert het een ellips die gecentreerd is in het element, met een breedte van 50% en een hoogte van 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() vormt een veelhoek door een opgegeven reeks hoekpunten met elkaar te verbinden. Elk hoekpunt wordt gespecificeerd met relatieve coördinaten binnen het element.

In dit voorbeeld specificeert het drie hoekpunten (boven midden, onder rechts, onder links) en knipt het in een driehoek. polygon() is zeer flexibel en kan elke vorm creëren.

`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() knipt naar binnen vanaf de buitenste randen van een element. Definieer een rechthoek door de afstand vanaf elk van de vier zijden op te geven.

De 10% is de afstand vanaf de bovenrand.
De 20% is de afstand vanaf de rechterrand.
De 30% is de afstand vanaf de onderrand.
De 40% is de afstand vanaf de linkerrand.

Deze specificatie creëert een rechthoek die naar binnen krimpt binnen het element.

`clip-path` met behulp van 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 kan niet alleen primitieve vormen gebruiken, maar ook complexe vormen knippen met behulp van een SVG <clipPath>-element.

In dit voorbeeld wordt een cirkelvormig uitknippad, gedefinieerd in SVG met het id myClip, toegepast op een HTML-element.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

`object-fit` en `object-position` Eigenschappen CSS-eigenschappen met betrekking tot filtereffecten

CSS-eigenschappen met betrekking tot transparantie

YouTube Video

HTML voor Voorbeeldweergave

Filtereffecten

opacity-eigenschap

z-index-eigenschap

Basismechanisme

Waarden

Notities

De eigenschap clip-path

Belangrijkste uitsnijvormen

circle()

ellipse()

polygon()

inset()

clip-path met behulp van SVG

YouTube Video

`opacity`-eigenschap

`z-index`-eigenschap

De eigenschap `clip-path`

`circle()`

`ellipse()`

`polygon()`

`inset()`

`clip-path` met behulp van SVG