flood-color
flood-color CSS 屬性定義了 <filter> 元素中 <feFlood> 和 <feDropShadow> 元素內當前濾鏡原始子區域的顏色。如果存在，它將覆蓋元素的 flood-color 屬性。
注意： flood-color 屬性僅適用於巢狀在 <svg> 中的 <feFlood> 和 <feDropShadow> 元素。它不適用於其他 SVG、HTML 或偽元素。
語法
css
/* <color> values */
flood-color: red;
flood-color: hsl(120deg 75% 25% / 60%);
flood-color: currentColor;
/* Global values */
flood-color: inherit;
flood-color: initial;
flood-color: revert;
flood-color: revert-layer;
flood-color: unset;
值
正式定義
正式語法
flood-color =
<color>
示例
定義濾鏡泛光的顏色
此示例演示了 flood-color 的基本用法，以及 CSS flood-color 屬性如何優先於 flood-color 屬性。
HTML
我們有一個 SVG，其中包含兩個 <filter> 元素，每個元素都有一個 <feFlood> 子元素。每個 <feFlood> 元素都包含 SVG flood-color 屬性，將泛光顏色定義為 seagreen。我們包含了兩個帶有 filter 屬性的 <rect> 元素；這是濾鏡將顯示的位置。
html
<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
我們使用 CSS height、width、x 和 y 屬性定義 <rect> 的大小和位置
css
rect {
width: 100px;
height: 100px;
x: 10px;
y: 10px;
}
#r2 {
x: 150px;
}
然後，我們使用 CSS flood-color 屬性為 <feFlood> 元素應用不同的泛光顏色值。我們使用命名顏色和 3 位十六進位制顏色，但我們可以使用任何有效的 CSS 顏色語法
css
#flood1 feFlood {
flood-color: rebeccapurple;
}
#flood2 feFlood {
flood-color: #ff3366;
}
結果
屬性將正方形定義為海綠色，但這些值被 CSS flood-color 值覆蓋。
規範
| 規範 |
|---|
| 濾鏡效果模組第 1 級 # FloodColorProperty |
瀏覽器相容性
載入中…