与透明度相关的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时，会遵循该父元素内的相对堆叠顺序。这被称为堆叠上下文。因此，即使子元素具有较高的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频道。