Thuộc tính opacity trong CSS

1) Thuộc tính opacity trong CSS

- Thuộc tính opacity dùng để thiết lập "độ trong suốt" của phần tử.

- Để hiểu thế nào là độ trong suốt thì bạn hãy xem qua ví dụ bên dưới.

- Ví dụ:

opacity: 1

1.0

0.0

2) Cách sử dụng thuộc tính opacity trong CSS

- Để sử dụng thuộc tính opacity, ta dùng cú pháp như sau:

opacity: number|initial|inherit;

- Trong đó, ta thấy giá trị của thuộc tính opacity có thể được xác định bởi một trong ba loại:

number

- Một số nằm trong đoạn 1 -> 0

(Độ trong suốt của phần tử sẽ tăng dần khi giá trị number giảm dần)

Xem ví dụ

initial

- Sử dụng giá trị mặc định của nó
(Mặc định, giá trị thuộc tính opacity của phần tử sẽ là 1)

Xem ví dụ

inherit

- Kế thừa giá trị thuộc tính opacity từ phần tử cha của nó

Xem ví dụ

- Ngoài ra, thuộc tính opacity cũng có thể dùng để thiết lập độ trong suốt cho hình ảnh.

Ví dụ:

<!DOCTYPE html>
<html>
<body>
   <p>- Hình ảnh bình thường.</p>
   <img src="../images/james-franco.jpg">
   <p>- Hình ảnh trong suốt.</p>
   <img src="../images/james-franco.jpg" style="opacity:0.7">
</body>
</html>

Xem ví dụ

3) Màu rgba()

- Khi một phần tử được thiết lập thuộc tính opacity thì các phần tử con của nó cũng sẽ bị ảnh hưởng bởi độ trong suốt của nó (điều đó khiến người dùng khó xem nội dung của phần tử con).

- Ví dụ:

- Phần tử có nền màu xanh là cha của phần tử có nền màu đỏ.

- Phần tử có nền màu xanh được thiết lập thuộc tính opacity với giá trị là 0.5

- Phần tử có nền màu đỏ tuy không được thiết lập thuộc tính opacity nhưng có cũng bị ảnh hưởng bởi độ trong suốt của phần tử có nền màu xanh.

Tài liệu hướng dẫn học Lập Trình Web

- Phần tử có nền màu xanh là cha của phần tử chứa dòng chữ "Tài liệu hướng dẫn học Lập Trình Web".

- Phần tử có nền màu xanh được thiết lập thuộc tính opacity với giá trị là 0.7

- Phần tử chứa dòng chữ "Tài liệu hướng dẫn học Lập Trình Web" tuy không được thiết lập thuộc tính opacity nhưng có cũng bị ảnh hưởng bởi độ trong suốt của phần tử có nền màu xanh.

- Từ đây, chúng ta có một cách để khắc phục vấn đề trên. Thay vì sử dụng thuộc tính opacity để thiết lập độ trong suốt cho phần tử thì chúng ta sẽ sử dụng màu rgba().

- Khi một phần tử được thiết lập độ trong suốt bằng màu rgba() thì các phần tử con của nó sẽ không bị ảnh hưởng bởi độ trong suốt của nó.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
   <style type="text/css">
      div{
         padding:50px;
         background-color:rgba(255, 0, 0, 0.3);
      }
      h1{
         padding:30px;
         background-color:green;
      }
   </style>
</head>
<body>
   <div>
      <h1>Tài liệu học Lập Trình Web</h1>
   </div>
</body>
</html>

Xem ví dụ

- Cách xác định giá trị của màu rgba() tương tự như màu rgb(), tuy nhiên nó có thêm số thứ tư dùng để xác định độ trong suốt của màu nền.