blur()

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 blur() CSS function áp dụng làm mờ Gaussian lên hình ảnh đầu vào. Kết quả của nó là một <filter-function>.

Try it

filter: blur(0);

filter: blur(4px);

filter: blur(1.5rem);

<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

blur()         /* Không có hiệu ứng */
blur(0)        /* Không có hiệu ứng */

blur(8px)      /* Làm mờ với bán kính 8px */
blur(1.17rem)  /* Làm mờ với bán kính 1.17rem */

Tham số

<length> Optional: Chỉ định bán kính làm mờ. Nó định nghĩa giá trị độ lệch chuẩn cho hàm Gaussian, tức là số pixel trên màn hình hòa trộn với nhau. Do đó, giá trị lớn hơn sẽ tạo ra độ mờ nhiều hơn. Giá trị 0 giữ nguyên đầu vào. Giá trị ban đầu cho interpolation là 0. Giá trị phần trăm không hợp lệ. Giá trị mặc định là 0.

Phần tử bộ lọc SVG <feGaussianBlur> cũng có thể được dùng để làm mờ nội dung. Thuộc tính stdDeviation của bộ lọc chấp nhận tối đa hai giá trị cho phép tạo ra các giá trị làm mờ phức tạp hơn. Để tạo ra độ mờ tương đương, chúng ta dùng một giá trị cho stdDeviation. Hiệu ứng SVG này sau đó có thể được tham chiếu bằng ID:

html

<svg role="none">
  <filter id="blur11">
    <feGaussianBlur stdDeviation="1.1" edgeMode="duplicate" />
  </filter>
</svg>

Các khai báo sau tạo ra hiệu ứng tương đương:

css

filter: blur(1.1px);
filter: url("#blur11"); /* với SVG nhúng */
filter: url("folder/fileName.svg#blur11"); /* định nghĩa bộ lọc svg bên ngoài */

Cú pháp chính thức

<blur()> = 
  blur( <length>? )

Ví dụ

Ví dụ này hiển thị ba hình ảnh: hình ảnh với hàm bộ lọc blur() được áp dụng, hình ảnh với hàm làm mờ SVG tương đương được áp dụng, và các hình ảnh gốc để so sánh:

css

.filter {
  filter: blur(3.5px);
}

html

<svg role="img" aria-label="Flag">
  <filter id="blur">
    <feGaussianBlur stdDeviation="3.5" edgeMode="duplicate" />
  </filter>
  <image
    href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
    xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
    filter="url('#blur')" />
</svg>

svg:not([height]) {
  display: none;
}

th,
td {
  padding: 5px;
}

<table>
  <thead>
    <tr>
      <th>Live example</th>
      <th>SVG Equivalent</th>
      <th>Original image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          class="filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <svg id="svg" height="220" width="220" overflow="visible">
          <filter id="svgBlur">
            <feGaussianBlur stdDeviation="3.5" />
          </filter>
          <image
            href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
            xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
            filter="url('#svgBlur')" />
        </svg>
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

Thông số kỹ thuật

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

Khả năng tương thích trình duyệt

Xem thêm

CSS filter effects module
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