opacity

Try it

opacity: 0;

opacity: 0.33;

opacity: 1;

<section class="default-example" id="default-example">
  <p id="example-element">
    London. Michaelmas term lately over, and the Lord Chancellor sitting in
    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
    as if the waters had but newly retired from the face of the earth, and it
    would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

#example-element {
  background-color: #963770;
  color: white;
  padding: 1em;
}

Cú pháp

opacity: 0.9;
opacity: 90%;

/* Giá trị toàn cục */
opacity: inherit;
opacity: initial;
opacity: revert;
opacity: revert-layer;
opacity: unset;

Giá trị

<alpha-value>

Một <number> trong khoảng từ 0.0 đến 1.0 (bao gồm hai đầu), hoặc một <percentage> trong khoảng từ 0% đến 100% (bao gồm hai đầu), biểu thị độ mờ đục của kênh (tức là giá trị của kênh alpha). Bất kỳ giá trị nào nằm ngoài khoảng này, dù hợp lệ, đều được kẹp về giới hạn gần nhất trong khoảng.

Giá trị	Ý nghĩa
0	Phần tử hoàn toàn trong suốt (tức là vô hình).
Bất kỳ <number> nào giữa 0 và 1 (không kể đầu)	Phần tử bán trong suốt (tức là có thể thấy nội dung phía sau phần tử).
1 (giá trị mặc định)	Phần tử hoàn toàn mờ đục (trực quan đặc).

Mô tả

opacity áp dụng cho toàn bộ phần tử, bao gồm cả nội dung của nó, mặc dù giá trị không được kế thừa bởi các phần tử con. Do đó, phần tử và các phần tử con của nó đều có cùng độ mờ đục so với nền của phần tử, ngay cả khi chúng có độ mờ đục khác nhau so với nhau.

Để chỉ thay đổi độ mờ đục của nền, hãy sử dụng thuộc tính background với một giá trị màu có kênh alpha. Ví dụ:

background: rgb(0 0 0 / 40%);

Khi giá trị opacity được đặt là 0, phần tử và tất cả các phần tử con của nó đều vô hình, nhưng chúng vẫn là một phần của DOM. Điều đó có nghĩa là chúng vẫn nhận sự kiện con trỏ và, nếu các phần tử nằm trong thứ tự tab, chúng vẫn nhận được tiêu điểm. Để đảm bảo khả năng sử dụng tốt, hãy đảm bảo làm cho các phần tử đó hiển thị khi nhận tương tác từ người dùng hoặc sử dụng thuộc tính CSS pointer-events để vô hiệu hóa sự kiện con trỏ và loại phần tử khỏi thứ tự tab bằng cách vô hiệu hóa với thuộc tính disabled hoặc đặt tab-index="-1" cho các phần tử tương tác không liên quan đến biểu mẫu.

Việc sử dụng opacity với giá trị khác 1 sẽ đặt phần tử vào một ngữ cảnh xếp chồng mới.

Không nên chỉ dùng độ mờ đục để cung cấp thông tin cho trình đọc màn hình. Hãy sử dụng thuộc tính HTML hidden, CSS visibility, hoặc thuộc tính kiểu CSS display. Tốt nhất nên tránh dùng thuộc tính aria-hidden, nhưng nếu phần tử bị ẩn bằng opacity, thì cũng nên ẩn nó khỏi trình đọc màn hình.

Chuyển tiếp opacity

Khi chuyển tiếp độ mờ đục của các phần tử khi thêm chúng vào trang trong khi nội dung trước đó bị ẩn bằng visibility: hidden, display: none, hoặc content-visibility: hidden, bạn cần bao gồm cả @starting-style và transition-behavior: allow-discrete:

.card {
  transition:
    opacity 5s,
    display 5s;
  background-color: orange;

  transition-behavior: allow-discrete;
  @starting-style {
    opacity: 0;
  }
}

.card.hidden {
  display: none;
  opacity: 0;
}

Để bật chuyển tiếp kiểu ban đầu, cần có các quy tắc @starting-style. Trong đoạn code trên, việc đặt opacity: 0 trong @starting-style cung cấp điểm bắt đầu cho chuyển tiếp khi phần tử nhận bản cập nhật kiểu ban đầu. Để biết thêm chi tiết, xem @starting-style.

Cần đặt transition-behavior: allow-discrete để chuyển tiếp sang display: none. Xem thuộc tính transition-behavior để biết thêm chi tiết.

Khả năng tiếp cận

Nếu độ mờ đục của văn bản được điều chỉnh, điều quan trọng là phải đảm bảo tỷ lệ tương phản giữa màu văn bản và nền đủ cao để những người có thị lực kém vẫn có thể đọc được nội dung trang.

Tỷ lệ tương phản màu sắc được xác định bằng cách so sánh độ sáng của các giá trị màu văn bản và nền đã điều chỉnh độ mờ. Để đáp ứng Hướng dẫn Tiếp cận Nội dung Web (WCAG) hiện tại, cần tỷ lệ 4,5:1 cho nội dung văn bản và 3:1 cho văn bản lớn hơn như tiêu đề. Văn bản lớn được định nghĩa là 18,66px và đậm trở lên, hoặc 24px trở lên.

• WebAIM: Color Contrast Checker
• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

Nhiều hệ điều hành cung cấp tùy chọn giảm độ trong suốt. Để đặt opacity dựa trên tùy chọn trong suốt của hệ điều hành người dùng, hãy sử dụng media query prefers-reduced-transparency.

Định nghĩa hình thức

Cú pháp hình thức

opacity = 
  <opacity-value>  

<opacity-value> = 
  <number>      |
  <percentage>  

Ví dụ

Thiết lập opacity

Ví dụ sau minh họa cách thuộc tính opacity thay đổi độ mờ đục của toàn bộ phần tử và nội dung, khiến văn bản rất khó đọc.

HTML

<div class="light">Bạn hầu như không thể thấy điều này.</div>
<div class="medium">Điều này dễ thấy hơn.</div>
<div class="heavy">Điều này rất dễ thấy.</div>

CSS

div {
  background-color: yellow;
  font-weight: bold;
  font-size: 130%;
}
.light {
  opacity: 0.2; /* Barely see the text over the background */
}
.medium {
  opacity: 0.5; /* See the text more clearly over the background */
}
.heavy {
  opacity: 0.9; /* See the text very clearly over the background */
}

Kết quả

Thiết lập opacity khi hover

Trong ví dụ sau, opacity được thay đổi khi hover, nhờ đó hình nền có sọc trên phần tử cha hiển thị xuyên qua ảnh.

HTML

<div class="wrapper">
  <img
    src="/shared-assets/images/examples/dino.svg"
    alt="MDN Dino"
    width="128"
    height="146"
    class="opacity" />
</div>

CSS

img.opacity {
  opacity: 1;
}

img.opacity:hover {
  opacity: 0.5;
}

.wrapper {
  width: 200px;
  height: 160px;
  background-color: #f03cc3;
  background-image: linear-gradient(
    90deg,
    transparent 50%,
    rgb(255 255 255 / 50%) 50%
  );
  background-size: 20px 20px;
}

Kết quả

Tạo kiểu dựa trên tùy chọn người dùng

Để tạo kiểu phần tử dựa trên tùy chọn trong suốt của hệ điều hành người dùng, hãy sử dụng media query prefers-reduced-transparency. Ví dụ sau minh họa cách sử dụng media query prefers-color-scheme để chỉ định opacity mong muốn dựa trên tùy chọn của người dùng.

.element {
  opacity: 0.5;
}

@media (prefers-reduced-transparency) {
  .element {
    opacity: 1;
  }
}

Đặc tả

Tương thích trình duyệt

Xem thêm

• Media query prefers-reduced-transparency
• Module CSS color
• Thuộc tính SVG opacity