ความทึบของคุณสมบัติเป็นโซลูชันที่ทันสมัยและใช้ได้กับ Firefox 0.9+ , Safari 2, Opera 9+, IE 9+ และ Chrome ทุกรุ่น คุณสมบัติ -moz-opacity เป็นคุณสมบัติทึบสำหรับ Firefox เวอร์ชันที่เก่ากว่า 0.9 ในขณะที่คุณสมบัติ –khtml-opacity ใช้สำหรับเวอร์ชันซาฟารีที่ขึ้นต้นด้วย 1 คุณสมบัติตัวกรองสำหรับเบราว์เซอร์ IE ตั้งแต่ 5 ถึง 9 เพื่อให้มีความทึบเหมือนเอฟเฟกต์ การใช้ค่าทั้งหมดเหล่านี้ร่วมกันเป็นทางเลือกสำหรับความทึบสมัยใหม่ทำให้เราใช้ความทึบในเบราว์เซอร์ทั้งหมดได้
ต่อไปนี้เป็นรหัสสำหรับการมีความทึบข้ามเบราว์เซอร์โดยใช้ 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> ผลลัพธ์
รหัสข้างต้นจะสร้างผลลัพธ์ต่อไปนี้ -
