Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

การตั้งค่าความทึบข้ามเบราว์เซอร์โดยใช้ CSS


ความทึบของคุณสมบัติเป็นโซลูชันที่ทันสมัยและใช้ได้กับ 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>

ผลลัพธ์

รหัสข้างต้นจะสร้างผลลัพธ์ต่อไปนี้ -

การตั้งค่าความทึบข้ามเบราว์เซอร์โดยใช้ CSS