ความทึบของคุณสมบัติเป็นโซลูชันขั้นสูงสุดและทันสมัย และใช้ได้กับ Firefox 0.9+, Safari 2, Opera 9+, IE 9+ และ Google 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>Opacity example</h1>
<img src="https://i.picsum.photos/id/505/800/800.jpg" >
<img class="transparent" src="https://i.picsum.photos/id/505/800/800.jpg" >
</body>
</html> ผลลัพธ์
รหัสข้างต้นจะสร้างผลลัพธ์ต่อไปนี้ -
