Bài 33: Cách sử dụng Opacity trong css

Cách sử dụng Opacity trong css

Thuộc tính opacity trong CSS được sử dụng để chỉnh độ mờ của một phần tử. Giá trị của thuộc tính này nằm trong khoảng từ 0 đến 1, trong đó 0 là hoàn toàn mờ và 1 là hoàn toàn rõ nét.

Dưới đây là một số ví dụ về cách sử dụng opacity trong CSS:

1. Đặt độ mờ cho một phần tử:

div {
  opacity: 0.5;
}

Trong ví dụ này, độ mờ của phần tử div sẽ là 50%.

2. Đặt độ mờ cho một hình ảnh:

img {
  opacity: 0.7;
}

Trong ví dụ này, độ mờ của hình ảnh sẽ là 70%.

3. Đặt độ mờ cho văn bản:

p {
  opacity: 0.6;
}

Trong ví dụ này, độ mờ của văn bản trong phần tử p sẽ là 60%.

4. Đặt độ mờ cho một phần tử khi rê chuột:

div:hover {
  opacity: 0.8;
}

Trong ví dụ này, khi rê chuột qua phần tử div, độ mờ của nó sẽ là 80%.

Bạn cũng có thể sử dụng thuộc tính opacity để làm cho các phần tử trông như đang chìm trong nền hoặc đang trong một trạng thái không hoàn toàn rõ nét. Tuy nhiên, hãy lưu ý rằng độ mờ cũng sẽ ảnh hưởng đến các phần tử con của phần tử đó, do đó bạn nên cân nhắc khi sử dụng opacity để tránh ảnh hưởng đến trải nghiệm người dùng.