เพิ่มความโปร่งใสให้พื้นหลังด้วย CSS

opacity สำหรับพื้นหลัง (แต่กระทบลูกด้วย)

ใช้ opacity บนพาเรนต์ จะทำให้พื้นหลังและเนื้อหาภายในโปร่งใสไปพร้อมกัน

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      background-color: #808000;
      padding: 20px;
    }
    div.one {
      opacity: 0.2;
      filter: alpha(opacity=20);
    }
    div.two {
      opacity: 0.5;
      filter: alpha(opacity=50);
    }
  </style>
</head>
<body>
  <h1>Heading</h1>
  <p>Check transparency in the below section:</p>
  <div class="one"><p>opacity 0.2</p></div>
  <div class="two"><p>opacity 0.5</p></div>
  <div><p>opacity 1</p></div>
</body>
</html>