與透明度相關的CSS屬性
本文將解釋與透明度相關的CSS屬性。
您將學習有關opacity、z-index和clip-path屬性的使用方法及語法。
YouTube Video
預覽的HTML
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>過濾效果
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}opacity屬性用於設置元素的透明度。此屬性指定整個元素的透明度，數值越接近0透明度越高，越接近1透明度越低。opacity屬性可以搭配動畫使用來創建淡入和淡出的效果。
opacity屬性不僅影響設定的元素，還會影響其子元素。這意味著如果父元素被設為半透明，其子元素也會繼承這個透明度。
在此範例中，設定如下。
-
opacity屬性設為1時，該元素完全不透明，就像一般元素一樣。 -
opacity屬性設為0.5時，該元素會變成半透明。 -
opacity屬性設為0時，該元素會變得完全透明，完全不可見。 -
transition屬性設為opacity，所以當滑鼠游標懸停在該元素時，它會在2秒後淡出並變得完全透明。 -
如果父元素的
opacity屬性設為0.5，其子元素也會變成半透明。
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是CSS中用來控制元素堆疊順序的屬性。此屬性指定一個元素是應該位於其他元素的前面還是後面。
- 紅色方塊的
z-index設為1，因此該元素會顯示在其他元素的前面。 - 藍色方塊的
z-index設為0，因此該元素顯示在紅色方塊的後面。 - 綠色方塊的
z-index設為2，因此該元素顯示在最前方。 - 淺藍色方塊雖然設定了最高的
z-index值4，但因為其父元素的z-index為0，所以它不會顯示在最前面。
基本機制
z-index 屬性接受一個數值，數值越高的元素會顯示在數值較小的元素前面。默認情況下，未指定 z-index 的元素會根據它們在 HTML 中出現的順序進行堆疊。
然而，要使 z-index 生效，該元素的 position 屬性必須設置為 relative、absolute、fixed 或 sticky。如果 position 屬性為 static，則 z-index 不會生效。
值
-
如果給
z-index指定一個正整數，該元素將顯示在更前面。數值越大，該元素越顯示在其他元素前面。- 如果將
z-index設置為0，它將維持默認堆疊順序。 - 如果將
z-index設置為1，則該元素會顯示在其他元素的前一層。
- 如果將
-
如果給
z-index指定一個負整數，該元素將顯示在更後面。數值越小，該元素越顯示在其他元素後面。- 如果將
z-index設置為-1，則該元素會顯示在其他元素的後一層。
- 如果將
注意事項
z-index依賴於父元素的z-index。當父元素有指定的z-index時，將根據該父元素的堆疊順序進行處理。這被稱為堆疊上下文（stacking context）。因此，即使子元素的z-index數值較高，如果父元素的z-index數值較低，它仍然無法顯示在其他元素前面。
clip-path 屬性
CSS 的 clip-path 屬性用於將元素裁剪為特定形狀。通常，元素以矩形框顯示，但使用 clip-path 可以將元素顯示為圓形或多邊形等複雜形狀。這是一個非常有用的工具，可以用於創建視覺設計或交互效果。
clip-path 屬性限制了元素的顯示區域，並隱藏了超出指定形狀的部分。接下來，我們將解釋如何指定常用的形狀。
主要裁剪形狀
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() 將元素裁剪為圓形。您可以通過指定圓的中心和半徑來控制其形狀。
- 第一個
50%是圓的半徑（相對於元素寬度或高度的百分比）。 - 後續的
at 50% 50%是圓的中心位置（相對於元素寬度和高度的百分比）。
在此處，它指定了一個半徑為元素尺寸一半且以元素為中心的圓形。
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() 將元素裁剪為橢圓形。您需要指定寬度和高度的半徑，以及中心位置。
- 第一個
50% 30%是寬度和高度的半徑。 - 後續的
at 50% 50%是橢圓的中心位置。
在此範例中，它指定了一個以元素為中心、寬度為 50%、高度為 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() 通過連接一組指定的頂點來形成多邊形。每個頂點使用相對於元素內部的座標指定。
- 在此範例中，它指定了三個頂點（頂部中心、右下角、左下角）並裁剪成一個三角形。
polygon()非常靈活，可以創建任何形狀。
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() 從元素的外邊界向內裁剪。通過指定與四邊距離來定義長方形。
10%是與頂部邊緣的距離。20%是與右側邊緣的距離。30%是與底部邊緣的距離。40%是與左側邊緣的距離。
此規範創建了一個縮小在元素內部的長方形。
使用 SVG 的 clip-path
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 不僅可以使用基礎形狀，還可以通過 SVG <clipPath> 元素裁剪出複雜形狀。
- 在此範例中，將SVG中以
id為myClip定義的圓形裁剪路徑套用到HTML元素上。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。