Giới thiệu
Thuộc tính filter trong HTML DOM Style dùng để định nghĩa các hiệu ứng hình ảnh (visual effects) cho một phần tử, như làm mờ, điều chỉnh độ sáng, tương phản, chuyển thang xám, sepia, v.v.
Cú pháp
Thiết lập filter:
object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"
Các hàm lọc (Filter Functions)
| Hàm | Mô tả |
|---|---|
| none | Không áp dụng hiệu ứng nào (mặc định). |
| blur(px) | Làm mờ hình ảnh. Giá trị px xác định độ mờ. |
| brightness(%) | Điều chỉnh độ sáng. 100% là gốc, >100% sáng hơn, <100% tối hơn. |
| contrast(%) | Điều chỉnh độ tương phản. 0% hoàn toàn đen, 100% gốc, >100% tăng tương phản. |
| drop-shadow(h-shadow v-shadow blur spread color) | Thêm bóng đổ cho hình ảnh. |
| grayscale(%) | Chuyển sang thang xám. 0% gốc, 100% hoàn toàn xám. |
| hue-rotate(deg) | Xoay màu sắc (hue) theo độ. 0deg là gốc, tối đa 360deg. |
| invert(%) | Đảo ngược màu sắc. 0% gốc, 100% hoàn toàn đảo ngược. |
| opacity(%) | Độ trong suốt. 0% trong suốt hoàn toàn, 100% không trong suốt (mặc định). |
| saturate(%) | Điều chỉnh độ bão hòa màu. 0% không màu, 100% gốc, >100% tăng bão hòa. |
| sepia(%) | Chuyển sang tông màu sepia (nâu vàng cổ điển). 0% gốc, 100% hoàn toàn sepia. |
Ví dụ
Ví dụ chuyển từ hue-rotate(90deg) sang sepia(40%) khi nhấn nút.
<!DOCTYPE html> <html> <head> <style>
#one {
filter: hue-rotate(90deg);
}
</style> <script>
function changeFilter() {
document.getElementById("one").style.filter = "sepia(40%)";
document.getElementById("Sample").innerHTML = "Bộ lọc sepia đã được áp dụng cho hình ảnh trên";
}
</script> </head> <body>
<img id="one" src="https://www.tutorialspoint.com/big_data_analytics/images/big-data-analytics-mini-logo.jpg">
<p>Nhấn nút để thay đổi filter của hình ảnh</p>
<button onclick="changeFilter()">Thay đổi Filter</button>
<p id="Sample"></p>
</body> </html>
Kết quả
Sau khi nhấn nút Thay đổi Filter:
