ตั้งค่าความทึบของรูปภาพด้วย CSS (opacity)

คุณสมบัติ opacity

เพื่อตั้งค่าความทึบของรูปภาพ ให้ใช้คุณสมบัติ CSS opacity (มาตรฐาน CSS3) คุณสมบัตินี้ใช้สร้างภาพโปร่งใส IE เก่าใช้ filter:alpha(opacity=x)

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อจัดสไตล์รูปภาพและตั้งค่าความทึบด้วย CSS:

<html>
  <head>
  </head>
  <body>
    <img style="border:1px solid red; opacity:0.2; filter:alpha(opacity=50);"
      src="https://www.tutorialspoint.com/assets/videotutorials/courses/css_online_training/380_course_215_image.jpg" />
  </body>
</html>

คุณสมบัติความทึบ:

• opacity - มาตรฐาน CSS3 (0.0 = โปร่งใสหมด, 1.0 = ทึบเต็มที่)
• filter:alpha(opacity=x) - IE เก่า (x = 0-100)

แนะนำ: ใช้ opacity: 0.5; เพียงอย่างเดียวสำหรับเบราว์เซอร์สมัยใหม่

หมายเหตุ: opacity ส่งผลต่อองค์ประกอบทั้งหมดรวมถึงลูก หากต้องการเฉพาะพื้นหลัง ให้ใช้ background-color: rgba(...) แทน