saturate()

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 saturate() CSS function tăng hoặc giảm độ bão hòa của hình ảnh đầu vào. Kết quả của nó là một <filter-function>.

Note: saturate() được chỉ định dưới dạng phép toán ma trận trên màu RGB. Nó không thực sự chuyển đổi màu sang mô hình HSL, đây là một phép toán phi tuyến. Do đó, nó có thể không bảo toàn màu sắc hay độ sáng của màu gốc.

Try it

filter: saturate(1);

filter: saturate(4);

filter: saturate(50%);

filter: saturate(0);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Cú pháp

css

saturate(amount)

Tham số

amount Optional: Mức độ chuyển đổi, được chỉ định dưới dạng <number> hoặc <percentage>. Giá trị dưới 100% làm giảm độ bão hòa của hình ảnh, trong khi giá trị trên 100% tăng độ bão hòa. Giá trị 0% hoàn toàn không bão hòa, trong khi giá trị 100% giữ nguyên đầu vào. Giá trị ban đầu cho interpolation là 1. Giá trị mặc định là 1.

Cú pháp chính thức

<saturate()> = 
  saturate( [ <number> | <percentage> ]? )

Ví dụ

Các ví dụ về giá trị hợp lệ cho saturate()

css

saturate(0)     /* Hoàn toàn không bão hòa */
saturate(.4)    /* Bão hòa 40% */
saturate()      /* Không có hiệu ứng */
saturate(100%)  /* Không có hiệu ứng */
saturate(200%)  /* Bão hòa gấp đôi */

saturate() không bảo toàn màu sắc hay độ sáng

Sơ đồ dưới đây so sánh hai dải màu gradient với hsl(0 50% 50%) là điểm giữa: dải đầu tiên được tạo bằng saturate(), và dải thứ hai sử dụng các giá trị màu HSL thực tế. Lưu ý cách gradient saturate() hiển thị sự khác biệt về màu sắc và độ sáng ở hai đầu.

html

<div>
  <p>Using <code>saturate()</code></p>
  <div id="saturate"></div>
</div>
<div>
  <p>Using <code>hsl()</code></p>
  <div id="hsl"></div>
</div>

#saturate,
#hsl {
  display: flex;
  margin: 1em 0;
}

#saturate div,
#hsl div {
  width: 2px;
  height: 100px;
}

const saturate = document.getElementById("saturate");
const hsl = document.getElementById("hsl");

for (let i = 0; i <= 200; i++) {
  const div1 = document.createElement("div");
  div1.style.backgroundColor = `hsl(0 ${i / 2}% 50%)`;
  hsl.appendChild(div1);

  const div2 = document.createElement("div");
  div2.style.backgroundColor = "hsl(0 50% 50%)";
  div2.style.filter = `saturate(${i}%)`;
  saturate.appendChild(div2);
}

Thông số kỹ thuật

Specification
Filter Effects Module Level 1 # funcdef-filter-saturate

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ính filter và backdrop-filter bao gồm:

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content