CSS opacity: độ trong suốt cho phần tử, nền và hiệu ứng mờ

opacity làm gì

opacity đặt mức trong suốt của phần tử: 1 là đặc (mặc định), 0 là vô hình, và mọi giá trị ở giữa cho phần nền phía sau lộ ra. Các hộp dưới đây nằm trên nền kẻ sọc để bạn dễ thấy:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Opacity</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .bg {
      display: flex;
      gap: 12px;
      padding: 16px;
      background: repeating-linear-gradient(45deg, #e5e7eb 0 10px, #ffffff 10px 20px);
    }
    .box { width: 90px; height: 70px; background: #2563eb; color: white; display: grid; place-items: center; font-weight: 700; }
  </style>
</head>
<body>
  <div class="bg">
    <div class="box" style="opacity: 1">1</div>
    <div class="box" style="opacity: 0.75">0.75</div>
    <div class="box" style="opacity: 0.5">0.5</div>
    <div class="box" style="opacity: 0.25">0.25</div>
    <div class="box" style="opacity: 0">0</div>
  </div>
</body>
</html>

Hộp cuối cùng vẫn ở đó: nó vẫn chiếm ô 90px trong hàng, chỉ là không vẽ gì cả. Để ý rằng các con số màu trắng mờ đi cùng hộp của chúng. opacity áp dụng cho phần tử và mọi thứ bên trong nó.

Nền trong suốt, chữ vẫn rõ

Vì opacity làm mờ cả phần tử con, nó là công cụ sai cho kiểu "nền trong suốt phía sau chữ dễ đọc". Hãy dùng màu nền có kênh alpha:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background alpha</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .bg { padding: 16px; background: repeating-linear-gradient(45deg, #f59e0b 0 10px, #ffffff 10px 20px); }
    .card { padding: 14px; margin-bottom: 10px; color: #111827; font-weight: 700; }
    .with-opacity { background: #ffffff; opacity: 0.6; }
    .with-alpha { background: rgb(255 255 255 / 0.6); }
  </style>
</head>
<body>
  <div class="bg">
    <div class="card with-opacity" id="a">opacity: 0.6 (text fades too)</div>
    <div class="card with-alpha" id="b">background alpha 0.6 (text stays solid)</div>
  </div>
  <p id="out"></p>
  <script>
    const s = (id) => getComputedStyle(document.getElementById(id));
    document.getElementById('out').textContent =
      'first: opacity ' + s('a').opacity + '  |  second: opacity ' + s('b').opacity + ', background ' + s('b').backgroundColor;
  </script>
</body>
</html>

Cả hai tấm nền trắng đều để sọc lộ ra ở cùng một mức. Ở tấm đầu, chữ mờ đi cùng tấm nền. Ở tấm thứ hai, chỉ màu nền là trong suốt (rgb(255 255 255 / 0.6), tương đương rgba(255, 255, 255, 0.6)), nên chữ vẫn đặc và dễ đọc. Màu có kênh alpha được giải thích trong trang màu sắc.

Phần tử con không thể thoát khỏi opacity của phần tử cha: opacity: 1 trên phần tử con chẳng có tác dụng gì, vì phần tử cha được vẽ thành một lớp mờ duy nhất, với phần tử con đã nằm sẵn bên trong.

Các giá trị

Opacity được "kế thừa" về mặt hiển thị chứ không phải về thuộc tính: opacity đã tính của phần tử con vẫn là 1, trong khi nó được vẽ bên trong một phần tử cha đã mờ.

opacity: 0, visibility: hidden và display: none

Cả ba đều làm phần tử biến mất, nhưng khác nhau ở mọi điểm còn lại:

Khác biệt gây rắc rối là hàng thứ hai. Một nút ở opacity: 0 vẫn bấm được và vẫn nhảy tới được bằng phím Tab:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hidden but clickable</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 10px; }
    .row button { width: 150px; height: 40px; font: inherit; }
  </style>
</head>
<body>
  <div class="row">
    <button id="o" style="opacity: 0">opacity: 0</button>
    <button id="v" style="visibility: hidden">visibility: hidden</button>
    <button id="d" style="display: none">display: none</button>
    <button id="shown">Visible</button>
  </div>
  <p id="out"></p>
  <script>
    const hit = (id) => {
      const r = document.getElementById(id).getBoundingClientRect();
      const top = document.elementFromPoint(r.left + 10, r.top + 10);
      return id + ': ' + (top && top.id === id ? 'clickable' : 'not clickable');
    };
    document.getElementById('out').textContent = [hit('o'), hit('v')].join('  |  ') +
      '  |  the Visible button starts at x = ' + document.getElementById('shown').offsetLeft + 'px';
  </script>
</body>
</html>

Phần kết quả hỏi trình duyệt phần tử nào đang nằm dưới một điểm bên trong mỗi nút bị ẩn. Nút opacity: 0 trả lời "clickable"; nút visibility: hidden thì không. Nút Visible bắt đầu sau hai ô trống 150px, vì nút display: none là nút duy nhất đã trả lại chỗ của nó. Để làm mờ dần một thứ rồi gỡ nó đi, hãy tạo animation cho opacity và đặt visibility: hidden ở cuối.

Hiệu ứng mờ khi rê chuột

opacity là một trong những thuộc tính rẻ nhất để tạo animation, nên đây là cách chuẩn để làm hiện dần và mờ dần. Một chú thích hiện lên trên ảnh:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover fade</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .tile { position: relative; width: 240px; height: 150px; background: linear-gradient(135deg, #2563eb, #16a34a); }
    .caption {
      position: absolute;
      inset: auto 0 0 0;
      padding: 10px;
      background: rgb(17 24 39 / 0.8);
      color: white;
      opacity: 0;
      transition: opacity 0.25s ease-out;
    }
    .tile:hover .caption, .tile:focus-within .caption { opacity: 1; }
  </style>
</head>
<body>
  <a class="tile" href="#" style="display: block">
    <span class="caption">Caption appears on hover and focus</span>
  </a>
</body>
</html>

:focus-within cũng cho người dùng bàn phím thấy chú thích. Nhớ bảng ở trên: khi vô hình, chú thích vẫn được trình đọc màn hình đọc, và đó đúng là điều bạn muốn với một chú thích.

Khả năng tiếp cận: chữ mờ thì mất độ tương phản

Giảm opacity là giảm độ tương phản. Chữ xám trên nền trắng ở opacity: 0.5 có thể tụt xa dưới tỷ lệ 4.5:1 mà văn bản cần. Với chữ phụ, hãy chọn một màu đạt độ tương phản thay vì làm mờ một màu tối. Với các nút bị vô hiệu hóa, giảm opacity là tín hiệu phổ biến, nhưng hãy dùng kèm thuộc tính disabled để nút cũng không thể tới được bằng bàn phím và được thông báo là đã bị vô hiệu hóa.

Tác dụng phụ: stacking context

Bất kỳ opacity nào dưới 1 đều tạo một stacking context mới, giống như transform. Khi đó các phần tử con có z-index cao chỉ xếp lớp bên trong phần tử bị mờ và không thể nổi lên trên các phần tử bên ngoài. Nếu một dropdown trong tấm panel bị mờ chui xuống dưới một phần tử khác, đây chính là lý do (trang z-index giải thích cách xếp lớp).

Lỗi thường gặp

• Làm mờ cả thẻ để nền trong suốt. Chữ cũng mờ theo. Hãy dùng rgb(... / 0.5) cho nền.
• Cố làm phần tử con đặc trở lại. Opacity của phần tử cha giới hạn mọi phần tử con.
• Chỉ dùng opacity: 0 để ẩn. Phần tử vẫn nhận cú bấm và focus. Hãy thêm visibility: hidden, hoặc dùng display: none (pointer-events: none chặn cú bấm nhưng không chặn focus bằng bàn phím).
• Viết opacity: 50. Opacity đi từ 0 đến 1; 50 bị giới hạn về 1. Hãy viết 0.5 hoặc 50%.
• Chữ có độ tương phản thấp vì opacity. Hãy kiểm tra độ tương phản của kết quả, không phải của màu gốc.