Áp dụng độ trong suốt (Opacity) cho hình ảnh bằng CSS3

Để áp dụng độ trong suốt cho hình ảnh với CSS3, sử dụng giá trị opacity cho thuộc tính filter.

Ví dụ

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

Lưu ý:

• filter: opacity(60%) tương đương opacity: 0.6 nhưng có thể kết hợp với filter khác
• Giá trị: 0% (hoàn toàn trong suốt) đến 100% (hoàn toàn không trong suốt)
• Khác với thuộc tính opacity: filter không ảnh hưởng đến con cháu, có thể animate mượt hơn