CSS-egenskaper relatert til gjennomsiktighet

Articles

Denne artikkelen forklarer CSS-egenskaper relatert til gjennomsiktighet.

Du kan lære om bruken og syntaksen til opacity-, z-index- og clip-path-egenskapene.

YouTube Video

HTML for 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>

Filtereffekter

`opacity`-egenskap

 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-egenskapen brukes til å sette gjennomsiktigheten til et element. Denne egenskapen spesifiserer opasiteten til hele elementet, hvor verdier nærmere 0 er mer gjennomsiktige og verdier nærmere 1 er mer ugjennomsiktige. opacity-egenskapen kan kombineres med animasjoner for å skape fade-in- og fade-out-effekter.

opacity-egenskapen påvirker ikke bare elementet den brukes på, men også barn-elementene. Dette betyr at hvis et foreldreelement settes som halv-gjennomsiktig, vil barn-elementene arve denne gjennomsiktigheten.

I dette eksempelet er innstillingene konfigurert som følger.

Når opacity-egenskapen er satt til 1, er elementet helt ugjennomsiktig, akkurat som et vanlig element.
Når opacity-egenskapen er satt til 0.5, blir elementet halvgjennomsiktig.
Når opacity-egenskapen er satt til 0, blir elementet helt gjennomsiktig og er ikke synlig i det hele tatt.
transition-egenskapen er satt til opacity, så når musepekeren holdes over elementet tones det ut og blir helt gjennomsiktig etter 2 sekunder.
Hvis overordnede element har en opacity-egenskap på 0.5, vil underordnede elementer også bli halvgjennomsiktige.

`z-index`-egenskap

 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 egenskap som brukes i CSS for å kontrollere stablingsrekkefølgen til elementer. Denne egenskapen spesifiserer om et element skal vises foran eller bak andre elementer.

I den røde boksen er z-index satt til 1, så elementet vises foran andre elementer.
I den blå boksen er z-index satt til 0, så elementet vises bak den røde boksen.
I den grønne boksen er z-index satt til 2, og den vises i den fremste posisjonen.
I den lyseblå boksen er den høyeste z-index på 4 angitt, men siden overordnet element har en z-index på 0, vises den ikke i den fremste posisjonen.

Grunnleggende mekanisme

z-index-egenskapen tar en numerisk verdi, der elementer med høyere tall vises foran de med lavere tall. Som standard stables elementer uten en spesifisert z-index etter rekkefølgen de vises i HTML-en.

For at z-index skal tre i kraft, må elementet ha position-egenskapen satt til enten relative, absolute, fixed eller sticky. Hvis position er static, har z-index ingen effekt.

Verdier

Hvis en positiv heltallverdi gis til z-index, vises elementet mer mot fremsiden. Jo større nummeret er, desto mer vises det foran andre elementer.
- Hvis z-index er satt til 0, opprettholder det standard lagrekkefølge.
- Hvis z-index er satt til 1, vises elementet ett lag foran andre elementer.
Hvis en negativ heltallverdi gis til z-index, vises elementet mer mot baksiden. Jo mindre nummeret er, desto mer vises det bak andre elementer.
- Hvis z-index er satt til -1, vises elementet ett lag bak andre elementer.

Notater

z-index avhenger av z-index på det overordnede elementet. Når et overordnet element har en spesifisert z-index, brukes den relative lagrekkefølgen innenfor det overordnede elementet. Dette kalles en stablekontekst. Derfor, selv om et underordnet element har en høy z-index, vil det ikke vises foran andre elementer hvis det overordnede elementets z-index er lav.

`clip-path`-egenskapen

CSS-egenskapen clip-path brukes til å klippe elementer til spesifikke former. Normalt vises elementer som rektangulære bokser, men med clip-path kan elementer vises i komplekse former som sirkler eller polygoner. Det er et svært nyttig verktøy for å lage visuelle design eller interaktive effekter.

clip-path-egenskapen begrenser visningsområdet til et element og skjuler delene utenfor den spesifiserte formen. Deretter forklarer vi hvordan du spesifiserer vanlige former.

Hovedklippeformer

`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 til en sirkelform. Du kan kontrollere formen ved å spesifisere senteret og radiusen til sirkelen.

Den første 50% er radiusen til sirkelen (angitt som en prosentandel av elementets bredde eller høyde).
Den påfølgende at 50% 50% er senterposisjonen til sirkelen (angitt som en prosentandel av elementets bredde og høyde).

Her spesifiseres en sirkel med en radius som er halvparten av elementets dimensjoner, sentrert 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 til en elliptisk form. Du spesifiserer radiusene for bredde og høyde, samt senterposisjonen.

De første 50% 30% er radiusene for bredde og høyde.
Den påfølgende at 50% 50% er senterposisjonen til ellipsen.

I dette eksempelet spesifiseres en ellipse sentrert i elementet, med en bredde på 50% og en høyde 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 å koble sammen et angitt sett med hjørner. Hver toppunkt spesifiseres med relative koordinater innenfor elementet.

I dette eksempelet spesifiseres tre toppunkter (øverst i midten, nederst til høyre, nederst til venstre) og klipper til en trekant. polygon() er svært fleksibel og kan lage hvilken som helst 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 innover fra de ytre kantene av et element. Definer et rektangel ved å spesifisere avstanden fra hver av de fire sidene.

10% er avstanden fra toppkanten.
20% er avstanden fra høyrekanten.
30% er avstanden fra bunnkanten.
40% er avstanden fra venstrekanten.

Denne spesifikasjonen lager et rektangel som krymper innenfor elementet.

`clip-path` ved bruk av 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 bruke ikke bare primitive former, men også klippe komplekse former ved hjelp av et SVG-<clipPath>-element.

I dette eksempelet brukes en sirkulær klippesti definert i SVG med id som myClip på et HTML-element.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

`object-fit` og `object-position` Egenskaper CSS-egenskaper relatert til filtereffekter

CSS-egenskaper relatert til gjennomsiktighet

YouTube Video

HTML for Forhåndsvisning

Filtereffekter

opacity-egenskap

z-index-egenskap

Grunnleggende mekanisme

Verdier

Notater

clip-path-egenskapen

Hovedklippeformer

circle()

ellipse()

polygon()

inset()

clip-path ved bruk av SVG

YouTube Video

`opacity`-egenskap

`z-index`-egenskap

`clip-path`-egenskapen

`circle()`

`ellipse()`

`polygon()`

`inset()`

`clip-path` ved bruk av SVG