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 |
浏览器兼容性
加载中…