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 |
瀏覽器相容性
載入中…