Hàm invert
Hàm invert cho phép
đảo ngược màu sắc trong hình nền.
Giá trị 0 biểu thị
hình ảnh giữ nguyên bản gốc. Giá trị
100% hoặc 1 sẽ đảo ngược hoàn toàn màu sắc của nền.
Bất kỳ con số nào nằm trong
khoảng này sẽ đảo ngược màu sắc một phần.
Không thể đặt giá trị âm.
Theo mặc định, giá trị là 0.
Cú pháp
bộ chọn {
filter: invert(số);
}
Ví dụ
Hãy đảo ngược màu sắc của hình ảnh chúng ta tới
giá trị 50%:
<div id="elem"></div>
#elem {
filter: invert(50%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Ví dụ
Bây giờ hãy đảo ngược màu sắc của hình ảnh chúng ta tới
giá trị 100%:
<div id="elem"></div>
#elem {
filter: invert(100%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Ví dụ
Bây giờ hãy đặt trong
hàm invert giá trị
bằng 0:
<div id="elem"></div>
#elem {
filter: invert(0);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Xem thêm
-
hàm
blur,
làm mờ nền -
hàm
brightness,
đặt độ sáng cho nền -
hàm
contrast,
đặt độ tương phản cho nền -
hàm
drop-shadow,
đặt bóng đổ cho nền -
hàm
hue-rotate,
đặt sắc độ cho nền -
hàm
opacity,
đặt độ trong suốt cho nền -
hàm
sepia,
chuyển đổi nền thành sepia -
thuộc tính
background,
là thuộc tính viết tắt cho nền -
thuộc tính
background-image,
dùng để đặt hình nền cho phần tử -
thuộc tính
filter,
đặt kiểu cho nền