Trong thiết kế web, chỉnh độ trong suốt cho một phần tử HTML giúp tạo hiệu ứng mờ ảo hoặc hòa trộn với nền, làm giao diện trở nên chuyên nghiệp hơn. Bạn có thể sử dụng thuộc tính CSS opacity để điều chỉnh độ trong suốt từ 0 (hoàn toàn trong suốt) đến 1 (hiển thị rõ ràng). Ngoài ra, thuộc tính rgba() hoặc hsla() cũng hỗ trợ đặt màu sắc với mức độ trong suốt tùy chỉnh. Điều này đặc biệt hữu ích khi thiết kế hiệu ứng hover, overlay hay các thành phần giao diện mềm mại, tinh tế.
Độ trong suốt của phần tử là gì !?
Độ trong suốt của phần tử có thể tạm hiểu là khả năng mà chúng ta có thể nhìn “xuyên” qua phần tử đó. Độ trong suốt của phần tử càng lớn thì ta càng nhìn rõ được nội dung nằm ở bên dưới nó.
Ví dụ:
– Tôi có một tấm hình.
– Tôi đặt một phần tử #test (có nền màu đen) nằm đè lên tấm hình đó.
– Như các bạn đã thấy, mặc định thì phần tử #test không có độ trong suốt, cho nên chúng ta không thể thấy nào được nội dung nằm ở bên dưới nó.
– Bây giờ, các bạn hãy thử kéo thanh giá trị phía dưới để tăng độ trong suốt của phần tử #test lên, khi đó các bạn sẽ thấy được nội dung nằm ở bên dưới phần tử #test.
Cách chỉnh độ trong suốt cho một phần tử HTML
– Để chỉnh độ trong suốt cho một phần tử thì chúng ta cần phải thiết lập thuộc tính opacity cho phần tử đó với cú pháp như sau:
opacity: value;– Trong đó, value có thể được xác định dựa theo một trong ba loại giá trị:
| number | – Chỉ định độ trong suốt của phần tử dựa theo một số cụ thể, số này nằm trong đoạn từ 0 đến 1 (số càng nhỏ thì độ trong suốt sẽ càng lớn) | Xem ví dụ |
| initial | – Sử dụng giá trị mặc định của nó.
(mặc định thì thuộc tính opacity có giá trị là 1) |
|
| inherit | – Kế thừa giá trị thuộc tính opacity từ phần tử cha của nó. |
Cách chỉnh độ trong suốt cho phần tử bằng giá trị RGBA()
– Thông thường, khi chúng ta thiết lập thuộc tính opacity cho một phần tử thì mặc định các phần tử con nằm bên trong phần tử đó sẽ bị ảnh hưởng bởi độ trong suốt của nó.
Ví dụ:
– Phần tử #test bên dưới được thiết lập thuộc tính opacity với giá trị 0.3 (bên trong nó có phần tử con là một tấm hình, tấm hình này không được thiết lập thuộc tính opacity nhưng vẫn có độ trong suốt vì bị ảnh hưởng bởi độ trong suốt từ phần tử cha của nó là #test)
– Khi gặp phải những trường hợp giống ví dụ phía trên, nếu các bạn không muốn phần tử con bị ảnh hưởng bởi độ trong suốt từ phần tử cha của nó, thì thay vì thiết lập thuộc tính opacity, chúng ta còn một giải pháp khác đó chính là gán giá trị rgba() cho thuộc tính background-color của phần tử mà mình muốn chỉnh độ trong suốt.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<style type="text/css">
#b{
padding:30px;
background-color:rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div id="b">
<img src="../image/cat.jpg">
</div>
</body>
</html>– Lưu ý: Để tìm hiểu cách xác định một giá trị rgba() thì các bạn vui lòng xem lại bài Màu sắc.
– Khi chúng ta thiết lập thuộc tính display với giá trị grid thì phần tử sẽ hiển thị dưới dạng một cái thùng chứa grid, nó thường được sử dụng để thiết kế giao diện dạng lưới.
| – Các bạn sẽ được tìm hiểu chi tiết cách sử dụng nhóm thuộc tính grid trong các bài hướng dẫn tiếp theo. |
