Các chức năng bộ lọc được sử dụng để đặt hiệu ứng hình ảnh trên các yếu tố như độ tương phản, độ sáng, xoay màu, độ mờ, trên hình ảnh, v.v. Bây giờ chúng ta hãy xem một số chức năng bộ lọc -
Tương phản
Để đặt độ tương phản của hình ảnh trong CSS, hãy sử dụng độ tương phản của bộ lọc (%). Hãy nhớ rằng, giá trị 0 làm cho hình ảnh có màu đen, 100% là cho hình ảnh gốc và mặc định. Phần còn lại, bạn có thể đặt bất kỳ giá trị nào bạn chọn, nhưng các giá trị trên 100% sẽ làm cho hình ảnh có độ tương phản cao hơn.
Ví dụ
Bây giờ chúng ta hãy xem một ví dụ để điều chỉnh độ tương phản của hình ảnh với CSS3 -
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: brightness(120%);
filter: contrast(120%);
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Learn MySQL</h1>
<p>Below image is brighter and has more contrast than the original image above.</p>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html> Đầu ra
Bóng đổ
Để thêm bóng đổ vào hình ảnh trong CSS3, hãy sử dụng giá trị bóng đổ cho thuộc tính bộ lọc. Nó có các giá trị sau -
h-shadow - Để chỉ định giá trị pixel cho bóng ngang.
v-shadow - Để chỉ định giá trị pixel cho bóng dọc. Giá trị âm đặt bóng bên trên hình ảnh.
mờ - Để thêm hiệu ứng mờ cho bóng đổ.
lây lan - Các giá trị dương làm bóng mở rộng và giá trị âm thu hẹp lại.
màu sắc - Để thêm màu vào bóng
Ví dụ
Bây giờ chúng ta hãy xem một ví dụ khác -
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: brightness(120%);
filter: contrast(120%);
filter: drop-shadow(10px 10px 10px green);
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Learn MySQL</h1>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html> Đầu ra
Hiệu ứng màu nâu đỏ
Để áp dụng hiệu ứng nâu đỏ cho hình ảnh bằng CSS3, hãy sử dụng giá trị nâu đỏ cho thuộc tính bộ lọc. Mã như sau -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: sepia(100%);
}
</style>
</head>
<body>
<h1>Learn Spring Framework</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Learn Spring Framework</h1>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html> Đầu ra
