পুরনো ব্রাউজার সাপোর্টের জন্য ভেন্ডর প্রিফিক্স এবং IE ফিল্টার সহ আধুনিক `opacity` প্রোপার্টি ব্যবহার করা হয়।
উদাহরণ: ক্রস-ব্রাউজার অপাসিটি
<!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); /* IE 5-9 */
-moz-opacity: 0.3; /* Firefox < 0.9 */
-khtml-opacity: 0.3; /* Safari 1.x */
opacity: 0.3; /* Modern browsers */
}
</style>
</head>
<body>
<h1>সব ব্রাউজারের জন্য অপাসিটি</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>দ্বিতীয় ইমেজটি সব ব্রাউজারে অপেক হবে</h3>
</body>
</html>
কোড ব্যাখ্যা
- opacity: 0.3: আধুনিক স্ট্যান্ডার্ড (০.০ - ১.০)।
- filter: alpha(opacity=30): IE ৫-৯ এর জন্য (০-১০০)।
- -moz-opacity: ফায়ারফক্স ০.৯ এর আগে।
- -khtml-opacity: সাফারি ১.x এর জন্য।
বর্তমান পরিস্থিতি
আজকাল শুধু `opacity: 0.3`ই যথেষ্ট। ভেন্ডর প্রিফিক্স শুধু অতি পুরনো ব্রাউজার সাপোর্টের জন্য।
