CSS-egenskaber relateret til gennemsigtighed

Articles

Denne artikel forklarer CSS-egenskaber relateret til gennemsigtighed.

Du kan lære om brugen og syntaksen for opacity-, z-index- og clip-path-egenskaber.

YouTube Video

HTML til forhåndsvisning

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>

Filtreeffekter

`opacity`-egenskab

 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-egenskaben bruges til at indstille gennemsigtigheden af et element. Denne egenskab angiver gennemsigtigheden af hele elementet, hvor værdier tættere på 0 er mere gennemsigtige, og værdier tættere på 1 er mere uigennemsigtige. opacity-egenskaben kan kombineres med animationer for at skabe fade-in- og fade-out-effekter.

opacity-egenskaben påvirker ikke kun elementet, den er angivet på, men også dets børneelementer. Dette betyder, at hvis et parent-element er indstillet til at være halvgennemsigtigt, vil dets børneelementer arve denne gennemsigtighed.

I dette eksempel er indstillingerne konfigureret som følger.

Når opacity-egenskaben er sat til 1, er elementet helt uigennemsigtigt, ligesom et normalt element.
Når opacity-egenskaben er sat til 0.5, bliver elementet halvgennemsigtigt.
Når opacity-egenskaben er sat til 1, bliver elementet fuldstændig gennemsigtigt og er slet ikke synligt.
transition-egenskaben er sat til opacity, så når musemarkøren bevæger sig over elementet, toner det ud og bliver helt gennemsigtigt efter 2 sekunder.
Hvis det overordnede element har en opacity-værdi på 0.5, bliver dets underordnede elementer også halvgennemsigtige.

`z-index`-egenskab

 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 er en egenskab, der bruges i CSS til at styre stablingsrækkefølgen af elementer. Denne egenskab angiver, om et element skal vises foran eller bag andre elementer.

I den røde boks er z-index sat til 1, så elementet vises foran de andre elementer.
I den blå boks er z-index sat til 0, så elementet vises bag den røde boks.
I den grønne boks er z-index sat til 2 og den vises forrest.
I den lyseblå boks er den højeste z-index på 4 angivet, men da det overordnede element har en z-index på 0, vises den ikke forrest.

Grundlæggende Mekanisme

z-index-egenskaben tager en numerisk værdi, hvor elementer med højere tal vises foran dem med lavere tal. Som standard stables elementer uden en specificeret z-index i den rækkefølge, de optræder i HTML'en.

For at z-index kan have en effekt, skal elementet have sin position-egenskab sat til enten relative, absolute, fixed eller sticky. Hvis position er static, har z-index ingen effekt.

Værdier

Hvis en positiv heltalsværdi gives til z-index, vises elementet længere fremme. Jo større tallet er, jo mere vises det foran andre elementer.
- Hvis z-index er sat til 0, opretholder det den standard stablingsrækkefølge.
- Hvis z-index er sat til 1, vises elementet ét lag foran andre elementer.
Hvis en negativ heltalsværdi gives til z-index, vises elementet længere bagved. Jo mindre tallet er, jo mere vises det bag andre elementer.
- Hvis z-index er sat til -1, vises elementet ét lag bagved andre elementer.

Noter

z-index afhænger af forældre-elementets z-index. Når et forældre-element har en specificeret z-index, anvendes den relative stablingsrækkefølge inden for dette forældre-element. Dette kaldes en stablingskontekst. Derfor, selvom et børne-element har en høj z-index, vil det ikke vises foran andre elementer, hvis forældre-elementets z-index er lav.

`clip-path`-egenskaben

CSS clip-path er en egenskab, der bruges til at klippe elementer i specifikke former. Normalt vises elementer som rektangulære bokse, men med clip-path kan elementer vises i komplekse former som cirkler eller polygoner. Det er et meget nyttigt værktøj til at skabe visuelle designs eller interaktive effekter.

clip-path-egenskaben begrænser visningsområdet for et element og skjuler de dele, der er uden for den specificerede form. Dernæst vil vi forklare, hvordan man specificerer almindeligt anvendte former.

Primære Klippeformer

`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() klipper et element i en cirkulær form. Du kan kontrollere formen ved at specificere centrum og radius for cirklen.

Den første 50% er cirklens radius (som en procentdel af elementets bredde eller højde).
De følgende at 50% 50% er cirklens centrumposition (som en procentdel af elementets bredde og højde).

Her specificeres en cirkel med en radius på halvdelen af elementets dimensioner, centreret i elementet.

`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() klipper et element ind i en elliptisk form. Du angiver radius for bredden og højden samt centrumpositionen.

De første 50% 30% er radierne for bredden og højden.
De følgende at 50% 50% er centrumpositionen for ellipsen.

I dette eksempel specificeres en ellipse centreret i elementet, med en bredde på 50% og en højde på 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() danner en polygon ved at forbinde et specifikt sæt af hjørner. Hvert hjørne angives med relative koordinater inden for elementet.

I dette eksempel specificeres tre hjørner (øverst midt, nederst højre, nederst venstre) og klipper det til en trekant. polygon() er meget fleksibel og kan skabe enhver form.

`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() klipper indad fra elementets yderkanter. Definer et rektangel ved at specificere afstanden fra hver af de fire sider.

10% er afstanden fra øverste kant.
20% er afstanden fra højre kant.
30% er afstanden fra nederste kant.
40% er afstanden fra venstre kant.

Denne specifikation skaber et rektangel, der krymper ind i elementet.

`clip-path` ved hjælp af 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 ikke kun bruge primitive former, men også klippe komplekse former ved hjælp af et SVG <clipPath>-element.

I dette eksempel anvendes en cirkulær klippesti, der er defineret i SVG med id'en myClip, på et HTML-element.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

`object-fit` og `object-position` egenskaber CSS-egenskaber relateret til filtereffekter

CSS-egenskaber relateret til gennemsigtighed

YouTube Video

HTML til forhåndsvisning

Filtreeffekter

opacity-egenskab

z-index-egenskab

Grundlæggende Mekanisme

Værdier

Noter

clip-path-egenskaben

Primære Klippeformer

circle()

ellipse()

polygon()

inset()

clip-path ved hjælp af SVG

YouTube Video

`opacity`-egenskab

`z-index`-egenskab

`clip-path`-egenskaben

`circle()`

`ellipse()`

`polygon()`

`inset()`

`clip-path` ved hjælp af SVG