Điều chỉnh độ bão hòa (Saturation) hình ảnh bằng CSS3

Để điều chỉnh độ bão hòa hình ảnh với CSS3, sử dụng giá trị saturate cho thuộc tính filter.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
  filter: saturation(500%);
}
</style>
</head>
<body>
<h1>Học Spring Framework</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Học 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>

Kết quả

Giải thích:

• saturate(0%): Hoàn toàn xám (grayscale)
• saturate(100%): Gốc (mặc định)
• saturate(>100%): Tăng độ bão hòa, màu sống hơn
• saturate(500%): Rất bão hòa, màu nóng, nghệ thuật
• Có thể dùng số: saturate(5) = 500%