Các thuộc tính CSS liên quan đến sự trong suốt

Articles

Bài viết này giải thích các thuộc tính CSS liên quan đến sự trong suốt.

Bạn có thể tìm hiểu về cách sử dụng và cú pháp của các thuộc tính opacity, z-index và clip-path.

YouTube Video

HTML để Xem trước

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>

Hiệu ứng lọc

Thuộc tính `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}

Thuộc tính opacity được sử dụng để đặt độ trong suốt của một phần tử. Thuộc tính này chỉ định độ mờ của toàn bộ phần tử, với giá trị gần 0 thì trong suốt hơn và giá trị gần 1 thì ít trong suốt hơn. Thuộc tính opacity có thể được kết hợp với hoạt ảnh để tạo hiệu ứng mờ dần vào hoặc ra.

Thuộc tính opacity không chỉ ảnh hưởng đến phần tử mà nó được thiết lập mà còn ảnh hưởng đến các phần tử con của nó. Điều này có nghĩa là nếu một phần tử cha được đặt để trở nên bán trong suốt, các phần tử con của nó sẽ kế thừa độ trong suốt đó.

Trong ví dụ này, các cài đặt được cấu hình như sau.

Khi thuộc tính opacity được đặt là 1, phần tử sẽ hoàn toàn không trong suốt, giống như một phần tử bình thường.
Khi thuộc tính opacity được đặt là 0.5, phần tử sẽ trở nên bán trong suốt.
Khi thuộc tính opacity được đặt là 0, phần tử trở nên hoàn toàn trong suốt và không thể nhìn thấy được.
Thuộc tính transition được đặt là opacity, vì vậy khi con trỏ chuột di chuyển lên phần tử, nó sẽ mờ dần và trở nên hoàn toàn trong suốt sau 2 giây.
Nếu phần tử cha có thuộc tính opacity là 0.5, các phần tử con cũng sẽ trở thành bán trong suốt.

Thuộc tính `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 là một thuộc tính được sử dụng trong CSS để kiểm soát thứ tự xếp chồng của các phần tử. Thuộc tính này chỉ định liệu một phần tử nên xuất hiện phía trước hay phía sau các phần tử khác.

Trong hộp màu đỏ, thuộc tính z-index được đặt là 1, vì vậy phần tử sẽ xuất hiện phía trước các phần tử khác.
Trong hộp màu xanh dương, thuộc tính z-index được đặt là 0, vì vậy phần tử sẽ xuất hiện phía sau hộp màu đỏ.
Trong hộp màu xanh lá cây, thuộc tính z-index được đặt là 2, và nó xuất hiện ở vị trí phía trước nhất.
Trong hộp màu xanh nhạt, z-index cao nhất là 4 được chỉ định, nhưng vì phần tử cha có z-index là 0 nên nó không xuất hiện ở vị trí phía trước nhất.

Cơ chế cơ bản

Thuộc tính z-index nhận một giá trị số, trong đó các phần tử có số lớn hơn sẽ được hiển thị trước các phần tử có số nhỏ hơn. Theo mặc định, các phần tử không được chỉ định z-index sẽ xếp chồng theo thứ tự xuất hiện trong HTML.

Tuy nhiên, để z-index có hiệu lực, thuộc tính position của phần tử phải được đặt thành relative, absolute, fixed, hoặc sticky. Nếu position là static, thì z-index sẽ không có hiệu lực.

Giá trị

Nếu một số nguyên dương được gán cho z-index, phần tử sẽ được hiển thị ở phía trước nhiều hơn. Số càng lớn, phần tử càng được hiển thị ở phía trước so với các phần tử khác.
- Nếu z-index được đặt thành 0, nó sẽ giữ thứ tự xếp chồng mặc định.
- Nếu z-index được đặt thành 1, phần tử sẽ được hiển thị một lớp ở phía trước so với các phần tử khác.
Nếu một số nguyên âm được gán cho z-index, phần tử sẽ được hiển thị ở phía sau nhiều hơn. Số càng nhỏ, phần tử càng được hiển thị ở phía sau so với các phần tử khác.
- Nếu z-index được đặt thành -1, phần tử sẽ được hiển thị một lớp ở phía sau so với các phần tử khác.

Ghi chú

z-index phụ thuộc vào z-index của phần tử cha. Khi phần tử cha có z-index được chỉ định, thứ tự xếp chồng tương đối trong phần tử cha đó sẽ được áp dụng. Điều này được gọi là ngữ cảnh xếp chồng. Do đó, ngay cả khi phần tử con có z-index cao, nếu z-index của phần tử cha thấp, nó sẽ không xuất hiện ở phía trước các phần tử khác.

Thuộc tính `clip-path`

Thuộc tính CSS clip-path được sử dụng để cắt các phần tử thành các hình dạng cụ thể. Thông thường, các phần tử được hiển thị dưới dạng hộp chữ nhật, nhưng với clip-path, các phần tử có thể được hiển thị dưới các hình dạng phức tạp như hình tròn hoặc đa giác. Đây là một công cụ rất hữu ích để tạo thiết kế trực quan hoặc hiệu ứng tương tác.

Thuộc tính clip-path giới hạn vùng hiển thị của phần tử và ẩn các phần bên ngoài hình dạng được chỉ định. Tiếp theo, chúng ta sẽ giải thích cách xác định các hình dạng được sử dụng phổ biến.

Các hình dạng cắt chính

`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() cắt một phần tử thành hình dạng hình tròn. Bạn có thể điều chỉnh hình dạng bằng cách chỉ định tâm và bán kính của hình tròn.

50% đầu tiên là bán kính của hình tròn (tính theo tỷ lệ phần trăm chiều rộng hoặc chiều cao của phần tử).
at 50% 50% tiếp theo là vị trí tâm của hình tròn (tính theo tỷ lệ phần trăm chiều rộng và chiều cao của phần tử).

Ở đây, nó chỉ định một hình tròn có bán kính bằng một nửa kích thước của phần tử, nằm ở trung tâm phần tử.

`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() cắt một phần tử thành hình elip. Bạn chỉ định bán kính của chiều rộng và chiều cao, cũng như vị trí tâm.

50% 30% đầu tiên là bán kính của chiều rộng và chiều cao.
at 50% 50% tiếp theo là vị trí tâm của hình elip.

Trong ví dụ này, nó chỉ định một hình elip nằm ở trung tâm phần tử, với chiều rộng 50% và chiều cao 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() tạo thành một đa giác bằng cách kết nối một tập hợp các đỉnh đã được chỉ định. Mỗi đỉnh được chỉ định bằng tọa độ tương đối bên trong phần tử.

Trong ví dụ này, nó chỉ định ba đỉnh (trung tâm trên, dưới bên phải, dưới bên trái) và cắt thành một hình tam giác. polygon() rất linh hoạt và có thể tạo ra bất kỳ hình dạng nào.

`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() cắt vào bên trong từ các cạnh ngoài của phần tử. Xác định một hình chữ nhật bằng cách chỉ định khoảng cách từ mỗi bên trong bốn cạnh.

10% là khoảng cách từ cạnh trên.
20% là khoảng cách từ cạnh phải.
30% là khoảng cách từ cạnh dưới.
40% là khoảng cách từ cạnh trái.

Đặc tả này tạo ra một hình chữ nhật thu nhỏ bên trong phần tử.

`clip-path` sử dụng 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 không chỉ có thể sử dụng các hình dạng cơ bản mà còn có thể cắt các hình dạng phức tạp bằng cách sử dụng một phần tử SVG <clipPath>.

Trong ví dụ này, một đường cắt hình tròn được định nghĩa trong SVG với id là myClip được áp dụng cho một phần tử HTML.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Thuộc tính `object-fit` và `object-position`Các thuộc tính CSS liên quan đến hiệu ứng bộ lọc

Các thuộc tính CSS liên quan đến sự trong suốt

YouTube Video

HTML để Xem trước

Hiệu ứng lọc

Thuộc tính opacity

Thuộc tính z-index

Cơ chế cơ bản

Giá trị

Ghi chú

Thuộc tính clip-path

Các hình dạng cắt chính

circle()

ellipse()

polygon()

inset()

clip-path sử dụng SVG

YouTube Video

Thuộc tính `opacity`

Thuộc tính `z-index`

Thuộc tính `clip-path`

`circle()`

`ellipse()`

`polygon()`

`inset()`

`clip-path` sử dụng SVG