CSS sifat berkaitan dengan ketelusan

Articles

Artikel ini menerangkan sifat CSS yang berkaitan dengan ketelusan.

Anda boleh mempelajari tentang penggunaan dan sintaks sifat opacity, z-index, dan clip-path.

YouTube Video

HTML untuk Pratonton

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>

Kesan penapis

Sifat `opacity`

 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}

Sifat opacity digunakan untuk menetapkan ketelusan sesuatu elemen. Sifat ini menentukan ketelusan seluruh elemen, dengan nilai yang lebih dekat ke 0 menjadi lebih telus dan nilai yang lebih dekat ke 1 menjadi lebih legap. Sifat opacity boleh digabungkan dengan animasi untuk mencipta kesan pudar masuk dan pudar keluar.

Sifat opacity menjejaskan bukan sahaja elemen tempatnya ditetapkan tetapi juga elemen anaknya. Ini bermaksud bahawa jika elemen induk ditetapkan untuk menjadi separa telus, elemen anaknya akan mewarisi sifat ketelusan tersebut.

Dalam contoh ini, tetapan dikonfigurasikan seperti berikut.

Apabila sifat opacity ditetapkan kepada 1, elemen tersebut menjadi legap sepenuhnya, sama seperti elemen biasa.
Apabila sifat opacity ditetapkan kepada 0.5, elemen tersebut menjadi separa telus.
Apabila sifat opacity ditetapkan kepada 0, elemen tersebut menjadi telus sepenuhnya dan langsung tidak kelihatan.
Sifat transition ditetapkan kepada opacity, jadi apabila kursor tetikus melayang ke atas elemen tersebut, ia akan pudar dan menjadi telus sepenuhnya selepas 2 saat.
Jika elemen induk mempunyai sifat opacity sebanyak 0.5, elemen anak juga akan menjadi separa telus.

Sifat `z-index`

 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 adalah sifat yang digunakan dalam CSS untuk mengawal susunan elemen. Sifat ini menentukan sama ada sesuatu elemen sepatutnya muncul di depan atau di belakang elemen lain.

Dalam kotak merah, z-index ditetapkan kepada 1, jadi elemen tersebut muncul di hadapan elemen lain.
Dalam kotak biru, z-index ditetapkan kepada 0, jadi elemen tersebut muncul di belakang kotak merah.
Dalam kotak hijau, z-index ditetapkan kepada 2, dan ia muncul di posisi paling hadapan.
Dalam kotak biru muda, z-index tertinggi iaitu 4 telah ditetapkan, tetapi kerana elemen induk mempunyai z-index sebanyak 0, ia tidak muncul di posisi paling hadapan.

Mekanisme Asas

Ciri z-index mengambil nilai berangka, di mana elemen dengan nombor lebih tinggi dipaparkan di hadapan elemen dengan nombor lebih kecil. Secara lalai, elemen tanpa z-index tertentu akan disusun mengikut susunan mereka muncul dalam HTML.

Walau bagaimanapun, untuk z-index berfungsi, ciri position elemen mesti ditetapkan kepada sama ada relative, absolute, fixed, atau sticky. Jika position ialah static, maka z-index tidak memberi kesan.

Nilai

Jika nilai integer positif diberikan kepada z-index, elemen akan dipaparkan lebih ke hadapan. Semakin besar nombor, semakin elemen dipaparkan di hadapan elemen lain.
- Jika z-index ditetapkan kepada 0, ia mengekalkan susunan pensusunan lalai.
- Jika z-index ditetapkan kepada 1, elemen akan dipaparkan satu lapisan di hadapan elemen lain.
Jika nilai integer negatif diberikan kepada z-index, elemen akan dipaparkan lebih ke belakang. Semakin kecil nombor, semakin elemen dipaparkan di belakang elemen lain.
- Jika z-index ditetapkan kepada -1, elemen akan dipaparkan satu lapisan di belakang elemen lain.

Nota

z-index bergantung pada z-index elemen induk. Apabila elemen induk mempunyai z-index tertentu, susunan pensusunan relatif dalam elemen induk itu digunakan. Ini dipanggil konteks pensusunan. Oleh itu, walaupun elemen anak mempunyai z-index yang tinggi, jika z-index elemen induk adalah rendah, ia tidak akan muncul di hadapan elemen lain.

Ciri `clip-path`

clip-path dalam CSS ialah ciri yang digunakan untuk memotong elemen ke bentuk tertentu. Biasanya, elemen dipaparkan sebagai kotak segi empat, tetapi dengan clip-path, elemen boleh dipaparkan dalam bentuk kompleks seperti bulatan atau poligon. Ia adalah alat yang sangat berguna untuk mencipta reka bentuk visual atau kesan interaktif.

Ciri clip-path mengehadkan kawasan paparan sesuatu elemen dan menyembunyikan bahagian di luar bentuk yang ditentukan. Seterusnya, kami akan menerangkan cara untuk menentukan bentuk-bentuk yang biasa digunakan.

Bentuk Pemotongan Utama

`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() memotong elemen ke dalam bentuk bulat. Anda boleh mengawal bentuk dengan menentukan pusat dan jejari bulatan.

50% pertama adalah jejari bulatan (sebagai peratusan lebar atau tinggi elemen).
at 50% 50% seterusnya adalah posisi pusat bulatan (sebagai peratusan lebar dan tinggi elemen).

Di sini, ia menentukan bulatan dengan jejari separuh dimensi elemen, terpusat di dalam elemen.

`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() memotong elemen menjadi bentuk elips. Anda menentukan radius lebar dan tinggi, serta posisi pusat.

50% 30% pertama adalah radius lebar dan tinggi.
at 50% 50% seterusnya adalah posisi pusat elips.

Dalam contoh ini, ia menentukan elips yang terpusat di dalam elemen, dengan lebar 50% dan tinggi 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() membentuk poligon dengan menyambungkan rangkaian bucu yang ditentukan. Setiap bucu ditentukan dengan koordinat relatif dalam elemen.

Dalam contoh ini, ia menentukan tiga bucu (atas tengah, bawah kanan, bawah kiri) dan memotong menjadi segitiga. polygon() sangat fleksibel dan boleh mencipta apa-apa bentuk.

`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() memotong ke dalam dari tepi luar elemen. Tentukan segi empat dengan menetapkan jarak dari setiap empat sisi.

10% adalah jarak dari tepi atas.
20% adalah jarak dari tepi kanan.
30% adalah jarak dari tepi bawah.
40% adalah jarak dari tepi kiri.

Spesifikasi ini mencipta segi empat yang mengecil di dalam elemen.

`clip-path` menggunakan 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 boleh menggunakan bukan sahaja bentuk primitif tetapi juga memotong bentuk kompleks menggunakan elemen SVG <clipPath>.

Dalam contoh ini, laluan klip berbentuk bulat yang ditakrifkan dalam SVG dengan id myClip digunakan pada elemen HTML.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

`object-fit` dan `object-position` Properties Sifat CSS Berkaitan dengan Kesan Penapis

CSS sifat berkaitan dengan ketelusan

YouTube Video

HTML untuk Pratonton

Kesan penapis

Sifat opacity

Sifat z-index

Mekanisme Asas

Nilai

Nota

Ciri clip-path

Bentuk Pemotongan Utama

circle()

ellipse()

polygon()

inset()

clip-path menggunakan SVG

YouTube Video

Sifat `opacity`

Sifat `z-index`

Ciri `clip-path`

`circle()`

`ellipse()`

`polygon()`

`inset()`

`clip-path` menggunakan SVG