Thuộc tính opacity là giải pháp hiện đại và hoạt động trên Firefox 0.9+, Safari 2, Opera 9+, IE 9+ và mọi phiên bản Chrome. Thuộc tính -moz-opacity dành cho Firefox cũ hơn 0.9, -khtml-opacity cho Safari từ phiên bản 1. Thuộc tính filter dành cho IE 5-9 để tạo hiệu ứng opacity. Việc kết hợp tất cả các giá trị này như một fallback cho opacity hiện đại cho phép chúng ta sử dụng opacity trên tất cả trình duyệt.
Dưới đây là mã để có opacity đa trình duyệt với CSS:
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>Cross browser opacity</h1> <img src="https://i.picsum.photos/id/605/800/800.jpg" /> <img class="transparent" src="https://i.picsum.photos/id/605/800/800.jpg" /> <h3>The second image above will get opaque on all browsers</h3> </body> </html>
Kết quả
Mã trên cho kết quả sau:
