flood-opacity
flood-opacity CSS 属性定义了在 <filter> 元素中，<feFlood> 和 <feDropShadow> 元素内当前滤镜基本子区域的不透明度。如果存在，它将覆盖元素的 flood-opacity 属性。
属性值影响 flood-color 的 alpha 通道；它可以增加 flood-color 的透明度，但不能使由 flood-color 属性定义的颜色更不透明。
注意： flood-opacity 属性仅适用于嵌套在 <svg> 中的 <feFlood> 和 <feDropShadow> 元素。它不适用于其他 SVG、HTML 或伪元素。
语法
/* numeric and percentage values */
flood-opacity: 0.2;
flood-opacity: 20%;
/* Global values */
flood-opacity: inherit;
flood-opacity: initial;
flood-opacity: revert;
flood-opacity: revert-layer;
flood-opacity: unset;
值
<opacity-value> 是一个 <number> 或 <percentage>，表示 SVG 渐变 <flood> 元素的不透明度。
<number>-
介于
0和1之间（包括0和1）的数值。 <percentage>-
介于
0%和100%之间（包括0%和100%）的百分比值。
当设置为 0 或 0% 时，泛光完全透明。当设置为 1 或 100% 时，元素具有 flood-color 值的完全不透明度，该值可能部分不透明，也可能不部分不透明。
正式定义
正式语法
flood-opacity =
<'opacity'>
<opacity> =
<opacity-value>
<opacity-value> =
<number> |
<percentage>
示例
定义滤镜的泛光不透明度
此示例演示了 flood-opacity 的基本用例，以及 CSS flood-opacity 属性如何优先于 flood-opacity 属性。
HTML
我们有一个 SVG，其中包含几个 <filter> 元素，每个元素都有一个 <feFlood> 子元素。<feFlood> 将滤镜定义为 seagreen，第一个通过其 flood-opacity 属性声明为完全不透明，第二个声明为完全透明。我们包含了两个 <rect> 元素，每个元素都有一个滤镜属性。
<svg viewBox="0 0 420 120" xmlns="http://www.w3.org/2000/svg">
<filter id="flood1">
<feFlood flood-color="seagreen" flood-opacity="1" />
</filter>
<filter id="flood2">
<feFlood flood-color="seagreen" flood-opacity="0" />
</filter>
<rect id="r1" filter="url(#flood1)" />
<rect id="r2" filter="url(#flood2)" />
</svg>
CSS
我们使用 CSS 定义了矩形的 height、width、x 和 y 位置，并在 SVG 上包含一个重复的线性渐变作为 background-image，以便更明显地看出泛光颜色的不透明度。
svg {
background-image: repeating-linear-gradient(
45deg,
transparent 0 9px,
#cccccc 0px 10px
);
}
rect {
width: 100px;
height: 100px;
x: 10px;
y: 10px;
}
#r2 {
x: 150px;
}
然后，我们使用 CSS flood-opacity 属性将不同的泛光不透明度值应用于 <feFlood> 元素。
#flood1 feFlood {
flood-opacity: 0.5;
}
#flood2 feFlood {
flood-opacity: 90%;
}
结果
属性将第一个正方形定义为完全不透明，第二个定义为完全透明，但这些值被 CSS flood-opacity 值覆盖。海绿色滤镜分别具有 50% 和 90% 的不透明度。
规范
| 规范 |
|---|
| 滤镜效果模块第 1 级 # FloodOpacityProperty |
浏览器兼容性
加载中…