Áp dụng hiệu ứng Sepia cho hình ảnh bằng CSS3

Để áp dụng hiệu ứng sepia (nâu vàng cổ điển) cho hình ảnh bằng CSS3, sử dụng giá trị sepia cho thuộc tính filter.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
  filter: sepia(100%);
}
</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:

• sepia(0%): Gốc, không hiệu ứng
• sepia(100%): Hoàn toàn sepia (màu nâu vàng cổ điển)
• Giá trị trung gian: hiệu ứng sepia một phần
• Tạo cảm giác vintage, retro, old photo
• Kết hợp với contrast, brightness để tinh chỉnh