Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> CSS

Thiết lập độ mờ cho màu nền với CSS (RGBA)

Màu RGBA - Chỉ làm trong suốt nền

Sử dụng rgba(red, green, blue, alpha) cho background-color để chỉ làm trong suốt **màu nền**, nội dung (chữ, hình) giữ nguyên độ mờ.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      background: rgb(40, 135, 70); /* Màu gốc */
      padding: 20px;
      margin-bottom: 10px;
      color: white;
    }
    div.first  { background: rgba(40, 135, 70, 0.2); } /* 20% độ mờ */
    div.second { background: rgba(40, 135, 70, 0.6); } /* 60% độ mờ */
  </style>
</head>
<body>
  <p>Màu RGBA - chỉ nền trong suốt:</p>
  <div class="first"><p>20% opacity (rất mờ)</p></div>
  <div class="second"><p>60% opacity</p></div>
  <div><p>Độ mờ mặc định (100%)</p></div>
</body>
</html>

3 hộp cùng màu xanh lá, nhưng độ mờ nền khác nhau. Chữ trắng trong suốt hoàn toàn. Đây là cách **chuẩn hiện đại** thay cho opacity trên container.