1) Độ 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ó.
– 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.
2) 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ó. |
3) 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ó.
– 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.
<!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>Xem ví dụ
– 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.
