opacity()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.
Hàm opacity() CSS function áp dụng độ trong suốt lên các mẫu trong hình ảnh đầu vào. Kết quả của nó là một <filter-function>.
Try it
filter: opacity(1);
filter: opacity(80%);
filter: opacity(50%);
filter: opacity(0.2);
filter: opacity(0);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
Note:
Hàm này tương tự với thuộc tính opacity đã được thiết lập từ lâu. Sự khác biệt là với bộ lọc, một số trình duyệt cung cấp tăng tốc phần cứng để hiệu suất tốt hơn.
Cú pháp
css
opacity(amount)
Tham số
amountOptional-
Mức độ chuyển đổi, được chỉ định dưới dạng
<number>hoặc<percentage>. Giá trị0%là hoàn toàn trong suốt, trong khi giá trị100%giữ nguyên đầu vào. Các giá trị từ0%đến100%là hệ số nhân tuyến tính trên hiệu ứng. Giá trị ban đầu cho interpolation là1. Giá trị mặc định là1.
Cú pháp chính thức
<opacity()> =
opacity( [ <number> | <percentage> ]? )
Ví dụ
Các ví dụ về giá trị hợp lệ cho opacity()
css
opacity(0%) /* Hoàn toàn trong suốt */
opacity(50%) /* Trong suốt 50% */
opacity() /* Không có hiệu ứng */
opacity(1)
Thông số kỹ thuật
| Specification |
|---|
| Filter Effects Module Level 1 # funcdef-filter-opacity |
Khả năng tương thích trình duyệt
Xem thêm
- Các hàm
<filter-function>khác có thể được dùng trong các giá trị của thuộc tínhfiltervàbackdrop-filterbao gồm: - Thuộc tính CSS
opacity