flood-opacity

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Thuộc tính flood-opacity chỉ ra giá trị độ mờ sẽ được dùng trên toàn bộ vùng con của filter primitive hiện tại.

Note: Với vai trò là một presentation attribute, flood-opacity cũng có thuộc tính CSS tương ứng: flood-opacity. Khi cả hai đều được chỉ định, thuộc tính CSS sẽ được ưu tiên.

Bạn có thể dùng thuộc tính này với các phần tử SVG sau:

Ví dụ

html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="flood1">
    <feFlood
      flood-color="seagreen"
      flood-opacity="1"
      x="0"
      y="0"
      width="200"
      height="200" />
  </filter>
  <filter id="flood2">
    <feFlood
      flood-color="seagreen"
      flood-opacity="0.3"
      x="0"
      y="0"
      width="200"
      height="200" />
  </filter>

  <rect x="0" y="0" width="200" height="200" filter="url(#flood1)" />
  <rect x="220" y="0" width="200" height="200" filter="url(#flood2)" />
</svg>

Lưu ý sử dụng

Giá trị <alpha-value>
Giá trị khởi đầu 1
Có thể animate
<alpha-value>

Một số hoặc phần trăm chỉ ra giá trị độ mờ sẽ được dùng trên toàn bộ vùng con của filter primitive hiện tại. Giá trị số 0 hoặc phần trăm 0% đại diện cho màu hoàn toàn trong suốt, 1 hoặc 100% đại diện cho màu hoàn toàn không trong suốt.

Thông số kỹ thuật

Thông số kỹ thuật
Filter Effects Module Level 1
# FloodOpacityProperty

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

Xem thêm