Hàm opacity() trong CSS

Trang trước Hàm oklch() CSS
Trang sau Hàm perspective() CSS
Quay lại lớp trên Sách tham khảo hàm CSS

Định nghĩa và cách sử dụng

CSS opacity() Hàm lọc được sử dụng để áp dụng hiệu ứng trong suốt cho phần tử.

100%（hoặc 1）sẽ không có hiệu ứng
50%（hoặc 0.5）sẽ làm cho phần tử trong suốt 50%
0%（hoặc 0）sẽ làm cho phần tử hoàn toàn trong suốt

Mô hình

Ví dụ 1

Đặt độ trong suốt khác nhau cho hình ảnh:

#img1 {
  filter: opacity(80%);
}
#img2 {
  filter: opacity(50%);
}
#img3 {
  filter: opacity(0.2);
}

Thử ngay

Ví dụ 2

sẽ opacity() với backdrop-filter Sử dụng cùng nhau các thuộc tính:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: opacity(50%);
  backdrop-filter: opacity(50%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

Thử ngay

Cú pháp CSS

opacity(amount)

Giá trị	Mô tả
amount	Tùy chọn. Định nghĩa giá trị số hoặc phần trăm của độ trong suốt. 0%（hoặc 0）sẽ làm cho phần tử hoàn toàn trong suốt. 100%（hoặc 1）biểu thị hình ảnh gốc (không có hiệu ứng). Giá trị mặc định là 1.

Giá trị

Mô tả

amount

Tùy chọn. Định nghĩa giá trị số hoặc phần trăm của độ trong suốt. 0%（hoặc 0）sẽ làm cho phần tử hoàn toàn trong suốt.

100%（hoặc 1）biểu thị hình ảnh gốc (không có hiệu ứng). Giá trị mặc định là 1.