Để đặ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
