Điều chỉnh độ tương phản hình ảnh bằng CSS3

Để thiết lập độ tương phản hình ảnh trong CSS, sử dụng filter: contrast(%). Lưu ý:

• Giá trị 0% làm hình ảnh hoàn toàn đen
• Giá trị 100% là hình ảnh gốc (mặc định)
• Giá trị trên 100% tăng độ tương phản

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
  filter: brightness(120%);
  filter: contrast(120%);
}
</style>
</head>
<body>
<h1>Học MySQL</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Học MySQL</h1>
<p>Hình ảnh dưới đây sáng hơn và có độ tương phản cao hơn hình ảnh gốc ở trên.</p>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>

Kết quả

Mẹo: Nên gộp các filter: filter: brightness(120%) contrast(120%);