Thuộc tính opacity là giải pháp hiện đại và hoạt động cho Firefox 0.9+, Safari 2, opera 9+, IE 9+ và mọi phiên bản 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 filter dành cho các trình duyệt IE từ 5 đến 9 để tạo hiệu ứng giống như độ mờ. Việc sử dụng tất cả các giá trị này cùng nhau làm dự phòng cho độ mờ hiện đại cho phép chúng tôi sử dụng độ mờ trong tất cả các trình duyệt.
Sau đây là mã để có độ mờ hình ảnh bằng cách sử dụng CSS hoạt động trên 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 for all browsers</h1>
<img src="https://i.picsum.photos/id/305/800/800.jpg" />
<img class="transparent" src="https://i.picsum.photos/id/305/800/800.jpg" />
<h3>The second image above will get opaque on all browsers</h3>
</body>
</html> Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -
