Tạo hộp trong suốt (transparent) với CSS

Thuộc tính opacity

opacity (0 đến 1) làm trong suốt **toàn bộ phần tử** (nền + nội dung + viền). Giá trị 0 = vô hình, 1 = không trong suốt (mặc định).

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      background-color: #808000; /* Olive */
      padding: 20px;
      margin-bottom: 20px;
    }
    div.myopacity {
      opacity: 0.4; /* 40% độ mờ */
      /* filter: alpha(opacity=40); IE8- không còn cần */
    }
  </style>
</head>
<body>
  <h1>Hộp trong suốt</h1>
  <p>So sánh độ mờ:</p>
  <div class="myopacity">
    <p>opacity: 0.4 (40%) - Nội dung cũng mờ</p>
  </div>
  <div>
    <p>opacity: 1 (mặc định) - Bình thường</p>
  </div>
</body>
</html>

Lưu ý: opacity làm mờ cả chữ con. Chỉ muốn nền trong suốt → dùng background: rgba(r, g, b, a) hoặc background-color: #rrggbbaa (hex 8 chữ số).