Độ mờ thuộc tính là giải pháp tối ưu và hiện đại và hoạt động cho Firefox 0.9+, Safari 2, opera 9+, IE 9+ và mọi phiên bản của Google Chrome. Thuộc tính -moz-opacity là thuộc tính opacity dành cho các phiên bản Firefox cũ hơn 0.9 trong khi thuộc tính –khtml-opacity dành cho các phiên bản safari bắt đầu bằng 1. Thuộc tính bộ lọc dành cho các trình duyệt IE từ 5 đến 9 để tạo hiệu ứng giống như opacity.
Sau đây là mã cho độ mờ của hình ảnh bằng cách sử dụng CSS cho tất cả các trình duyệt -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
img {
width:270px;
height:200px;
}
.transparent{
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
</style>
</head>
<body>
<h1>Opacity example</h1>
<img src="https://i.picsum.photos/id/505/800/800.jpg" >
<img class="transparent" src="https://i.picsum.photos/id/505/800/800.jpg" >
</body>
</html> Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -
