opacity প্রপার্টি আধুনিক সমাধান এবং ফায়ারফক্স ০.৯+, সাফারি ২, ওপেরা ৯+, আইই ৯+ এবং 크োমের প্রতিটি ভার্সনে কাজ করে। -moz-opacity প্রপার্টি ০.৯-এর পুরনো ফায়ারফক্স ভার্সনের জন্য অপাসিটি প্রপার্টি। -khtml-opacity প্রপার্টি ১ থেকে শুরু হওয়া সাফারি ভার্সনগুলির জন্য। filter প্রপার্টি আইই ব্রাউজার ৫ থেকে ৯-এ অপাসিটির মতো ইফেক্ট দেওয়ার জন্য। এই সব মানকে ফলব্যাক হিসেবে একসাথে ব্যবহার করে আমরা সব ব্রাউজারে opacity ব্যবহার করতে পারি।
উদাহরণ
নিচের কোডটি CSS ব্যবহার করে ক্রস-ব্রাউজার অপাসিটি করার পদ্ধতি দেখায়:
<!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>
আউটপুট
উপরোক্ত কোড নিচের আউটপুটটি তৈরি করবে:
