Hàm brightness() trong CSS

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

CSS brightness() Hàm lọc được sử dụng để điều chỉnh ánh sáng của phần tử.

  • 0% sẽ làm cho hình ảnh hoàn toàn đen
  • 100% (hoặc 1) là giá trị mặc định, biểu thị hình ảnh gốc
  • Giá trị trên 100% sẽ làm cho hình ảnh sáng hơn
  • Giá trị dưới 100% sẽ làm cho hình ảnh tối hơn

Mô hình

Ví dụ 1

Làm cho hình ảnh sáng hơn hoặc tối hơn hình ảnh gốc:

#img1 {
  filter: brightness(150%);
}
#img2 {
  filter: brightness(50%);
}

Thử ngay

Ví dụ 2

sử dụng brightness() với backdrop-filter Kết hợp thuộc tính:

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

Thử ngay

Ngữ pháp CSS

brightness(amount)
Giá trị Mô tả
amount

Tùy chọn. Định nghĩa giá trị ánh sáng, có thể là số hoặc phần trăm.

0% sẽ làm cho phần tử hoàn toàn đen. 100% (hoặc 1) là giá trị mặc định, biểu thị hình ảnh gốc (không có hiệu ứng).

Giá trị trên 100% sẽ làm cho hình ảnh sáng hơn.

Chi tiết kỹ thuật

Phiên bản: CSS Filter Effects Module Level 1

Hỗ trợ trình duyệt

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ hàm này hoàn toàn.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Trang liên quan

Tham khảo:Thuộc tính filter của CSS

Tham khảo:Hàm blur() CSS

Tham khảo:Hàm contrast() trong CSS

Tham khảo:Hàm drop-shadow() trong CSS

Tham khảo:Hàm grayscale() trong CSS

Tham khảo:Hàm hue-rotate() trong CSS

Tham khảo:Hàm invert() trong CSS

Tham khảo:Hàm opacity() trong CSS

Tham khảo:Hàm saturate() CSS

Tham khảo:Hàm sepia() CSS