CSS-egenskaper relaterade till transparens

Articles

Den här artikeln förklarar CSS-egenskaper relaterade till transparens.

Du kan lära dig om användningen och syntaxen för egenskaperna opacity, z-index och clip-path.

YouTube Video

HTML för förhandsgranskning

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`-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 används för att ställa in genomskinligheten för ett element. Den här egenskapen anger genomskinligheten för hela elementet, där värden närmare 0 är mer genomskinliga och värden närmare 1 är mer opaka. opacity-egenskapen kan kombineras med animationer för att skapa effekter av att tona in och tona ut.

opacity-egenskapen påverkar inte bara elementet som den är inställd på utan även dess underordnade element. Detta innebär att om ett föräldraelement anges vara halvgenomskinligt, kommer dess underordnade element att ärva den transparensen.

I det här exemplet är inställningarna konfigurerade enligt följande.

När egenskapen opacity är satt till 1 är elementet helt ogenomskinligt, precis som ett vanligt element.
När egenskapen opacity är satt till 0.5 blir elementet halvtransparent.
När egenskapen opacity är satt till 0 blir elementet helt genomskinligt och är inte synligt alls.
transition-egenskapen är satt till opacity, så när muspekaren hovrar över elementet tonas det ut och blir helt genomskinligt efter 2 sekunder.
Om föräldraelementet har opacity-egenskapen satt till 0.5 blir också barnelementen halvtransparenta.

`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 är en egenskap som används i CSS för att styra elementens staplingsordning. Den här egenskapen anger om ett element ska visas framför eller bakom andra element.

I den röda rutan är z-index satt till 1, så elementet visas framför andra element.
I den blå rutan är z-index satt till 0, så elementet visas bakom den röda rutan.
I den gröna rutan är z-index satt till 2 och den visas längst fram.
I den ljusblå rutan anges det högsta z-index-värdet 4, men eftersom föräldraelementet har z-index satt till 0 visas det inte längst fram.

Grundläggande mekanism

z-index-egenskapen tar ett numeriskt värde, där element med högre siffror visas framför de med lägre siffror. Som standard staplas element utan en angiven z-index enligt den ordning de visas i HTML.

Men för att z-index ska ha någon effekt måste elementet ha sin position-egenskap inställd på antingen relative, absolute, fixed eller sticky. Om position är static har z-index ingen effekt.

Värden

Om ett positivt heltal anges för z-index, visas elementet längre fram. Ju större siffran är, desto mer visas det framför andra element.
- Om z-index är inställd på 0 bibehålls standardordningen för stapling.
- Om z-index är inställd på 1, visas elementet ett lager framför andra element.
Om ett negativt heltal anges för z-index, visas elementet längre bak. Ju mindre siffran är, desto mer visas det bakom andra element.
- Om z-index är inställd på -1, visas elementet ett lager bakom andra element.

Anteckningar

z-index beror på z-index för föräldraelementet. När ett föräldraelement har en angiven z-index tillämpas den relativa staplingsordningen inom det föräldraelementet. Detta kallas för en staplingskontext. Därför, även om ett barnelement har en hög z-index, om föräldraelementets z-index är låg, kommer det inte att visas framför andra element.

`clip-path`-egenskapen

CSS-clip-path är en egenskap som används för att klippa element i specifika former. Normalt visas element som rektangulära rutor, men med clip-path kan element visas i komplexa former som cirklar eller polygoner. Det är ett mycket användbart verktyg för att skapa visuella designmönster eller interaktiva effekter.

clip-path-egenskapen begränsar visningsområdet för ett element och döljer delarna utanför den specificerade formen. Nästa steg är att förklara hur man anger vanligt använda former.

Huvudsakliga klippformer

`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 ett element till en cirkulär form. Du kan kontrollera formen genom att specificera cirkelns centrum och radie.

Den första 50% är cirkelns radie (som en procentandel av elementets bredd eller höjd).
Den följande at 50% 50% är cirkelns centrumposition (som en procentandel av elementets bredd och höjd).

Här specificeras en cirkel med en radie som är hälften av elementets mått, centrerad 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 ett element till en elliptisk form. Du specificerar radien för bredd och höjd, samt centrumpositionen.

De första 50% 30% är radien för bredd och höjd.
Den följande at 50% 50% är ellipsens centrumposition.

I det här exemplet specificeras en ellips centrerad i elementet, med en bredd på 50% och en höjd 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() bildar en polygon genom att ansluta en angiven uppsättning av hörn. Varje hörn specificeras med relativa koordinater inom elementet.

I det här exemplet specificeras tre hörn (översta mitten, nedre höger, nedre vänster) och klipps till en triangel. polygon() är mycket flexibel och kan skapa vilken form som helst.

`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 inåt från ett elements ytterkanter. Definiera en rektangel genom att specificera avståndet från var och en av de fyra sidorna.

10% är avståndet från överkanten.
20% är avståndet från högerkanten.
30% är avståndet från underkanten.
40% är avståndet från vänsterkanten.

Denna specifikation skapar en rektangel som krymper inuti elementet.

`clip-path` med användning 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 använda inte bara primitiva former utan även klippa komplexa former med hjälp av ett SVG <clipPath>-element.

I det här exemplet tillämpas en cirkulär klippväg som definierats i SVG med id-attributet myClip på ett HTML-element.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

`object-fit`- och `object-position`-egenskaperna CSS-egenskaper relaterade till filtereffekter

CSS-egenskaper relaterade till transparens

YouTube Video

HTML för förhandsgranskning

Filtreeffekter

opacity-egenskap

z-index-egenskap

Grundläggande mekanism

Värden

Anteckningar

clip-path-egenskapen

Huvudsakliga klippformer

circle()

ellipse()

polygon()

inset()

clip-path med användning av SVG

YouTube Video

`opacity`-egenskap

`z-index`-egenskap

`clip-path`-egenskapen

`circle()`

`ellipse()`

`polygon()`

`inset()`

`clip-path` med användning av SVG