flood-color
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 CSS flood-color xác định màu sắc của vùng phụ bộ lọc hiện tại trong các phần tử <feFlood> và <feDropShadow> bên trong <filter>. Nếu có, nó ghi đè thuộc tính flood-color của phần tử.
Note:
Thuộc tính flood-color chỉ áp dụng cho các phần tử <feFlood> và <feDropShadow> lồng trong <svg>. Nó không áp dụng cho các phần tử SVG, HTML hay pseudo-element khác.
Cú pháp
/* Giá trị <color> */
flood-color: red;
flood-color: hsl(120deg 75% 25% / 60%);
flood-color: currentColor;
/* Giá trị toàn cục */
flood-color: inherit;
flood-color: initial;
flood-color: revert;
flood-color: revert-layer;
flood-color: unset;
Giá trị
Định nghĩa hình thức
| Initial value | black |
|---|---|
| Applies to | <feFlood> and <feDropShadow> elements in <svg> |
| Inherited | no |
| Computed value | as specified |
| Animation type | by computed value |
Cú pháp hình thức
flood-color =
<color>
Ví dụ
Xác định màu sắc của flood bộ lọc
Ví dụ này minh họa trường hợp sử dụng cơ bản của flood-color, và cách thuộc tính CSS flood-color có mức ưu tiên cao hơn thuộc tính flood-color.
HTML
Chúng ta có một SVG với hai phần tử <filter>, mỗi phần tử có một phần tử con <feFlood>. Mỗi phần tử <feFlood> bao gồm thuộc tính SVG flood-color xác định màu flood là seagreen. Chúng ta đã thêm hai phần tử <rect> với thuộc tính filter; đây là nơi các bộ lọc sẽ được hiển thị.
<svg viewBox="0 0 420 120" xmlns="http://www.w3.org/2000/svg">
<filter id="flood1">
<feFlood flood-color="seagreen" />
</filter>
<filter id="flood2">
<feFlood flood-color="seagreen" />
</filter>
<rect id="r1" filter="url(#flood1)" />
<rect id="r2" filter="url(#flood2)" />
</svg>
CSS
Chúng ta xác định kích thước và vị trí của các <rect> bằng các thuộc tính CSS height, width, x và y:
rect {
width: 100px;
height: 100px;
x: 10px;
y: 10px;
}
#r2 {
x: 150px;
}
Sau đó chúng ta áp dụng các giá trị màu flood khác nhau cho các phần tử <feFlood> bằng thuộc tính CSS flood-color. Chúng ta sử dụng màu có tên và màu thập lục phân 3 chữ số, nhưng có thể dùng bất kỳ cú pháp màu CSS hợp lệ nào:
#flood1 feFlood {
flood-color: rebeccapurple;
}
#flood2 feFlood {
flood-color: #ff3366;
}
Kết quả
Các thuộc tính đã xác định các hình vuông là seagreen, nhưng các giá trị này đã bị ghi đè bởi các giá trị CSS flood-color.
Đặc tả
| Thông số kỹ thuật |
|---|
| Filter Effects Module Level 1 # FloodColorProperty |