Thiết lập độ sáng hình ảnh (Brightness) bằng CSS3

Để thiết lập độ sáng hình ảnh trong CSS, sử dụng filter: brightness(%). 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% làm hình ảnh sáng hơn

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
  filter: brightness(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 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:

• Có thể dùng giá trị số: brightness(1.2) tương đương 120%
• Kết hợp với contrast, saturate để điều chỉnh hình ảnh hoàn chỉnh
• Hiệu suất tốt hơn so với chỉnh sửa file ảnh gốc