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