fill-opacity
fill-opacity CSS 屬性定義了應用於 SVG 形狀或文字內容元素的繪製操作（顏色、漸變、圖案等）的不透明度，用於填充元素。該屬性僅定義元素 fill 的不透明度；它不影響描邊。如果存在，它將覆蓋元素的 fill-opacity 屬性。
注意： fill-opacity 屬性僅適用於巢狀在 <svg> 中的 <circle>、<ellipse>、<path>、<polygon>、<polyline>、<rect>、<text>、<textPath> 和 <tspan> 元素。它不適用於其他 SVG、HTML 或偽元素。
語法
/* numeric and percentage values */
fill-opacity: 0.2;
fill-opacity: 20%;
/* Global values */
fill-opacity: inherit;
fill-opacity: initial;
fill-opacity: revert;
fill-opacity: revert-layer;
fill-opacity: unset;
值
<number> 和 <percentage> 值表示元素 fill 的不透明度。
<number>-
介於
0和1之間（包括0和1）的數值。 <percentage>-
介於
0%和100%之間（包括0%和100%）的百分比值。
當值為 0 或 0% 時，元素完全透明。當值為 1 或 100% 時，元素完全不透明。當值介於兩者之間時，元素是半透明的，元素後面的內容可見。
正式定義
正式語法
fill-opacity =
<'opacity'>
<opacity> =
<opacity-value>
<opacity-value> =
<number> |
<percentage>
示例
定義 SVG 元素的填充不透明度
此示例演示了 fill-opacity 的基本用例，以及 CSS fill-opacity 屬性如何優先於 fill-opacity 屬性，並且對應用於形狀的任何 stroke 沒有影響。
HTML
我們包含了幾種不同的 SVG 圖形元素，並將每個元素的 fill-opacity 屬性設定為 1（除了 line），這意味著每個元素的填充都是不透明的。fill-opacity SVG 屬性不適用於 <line>。
<svg viewBox="0 0 100 150" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="30" height="30" fill-opacity="1" />
<rect x="60" y="10" rx="10" ry="10" width="30" height="30" fill-opacity="1" />
<circle cx="25" cy="75" r="20" fill-opacity="1" />
<ellipse cx="75" cy="75" rx="20" ry="10" fill-opacity="1" />
<line x1="50" x2="90" y1="40" y2="60" stroke="black" stroke-width="5" />
<polyline
points="60 90 65 100 70 95 75 110 80 105 85 120 90 115 95 130 100 125"
fill-opacity="1" />
<path d="M20,130 Q40,105 50,130 T90,130" fill-opacity="1" />
</svg>
CSS
透過 CSS，我們使用 fill-opacity 屬性來覆蓋 SVG fill-opacity 屬性的值，為每個 SVG 元素賦予不同的值。
我們為圓形和橢圓形添加了 stroke，以證明描邊的不透明度不受 fill-opacity 屬性的影響。
設定了其他 SVG 樣式，包括背景影像，以便更容易地看到每個元素的不透明度。為了簡潔起見，此處未顯示。
svg > * {
fill: black;
}
rect:last-of-type {
fill-opacity: 0.1;
}
circle {
fill-opacity: 0.6;
}
ellipse {
fill-opacity: 40%;
}
line {
fill-opacity: 10%;
}
polyline {
fill-opacity: 50%;
}
path {
fill-opacity: 0.5;
}
circle,
ellipse {
stroke: black;
stroke-width: 3px;
}
結果
只有兩個元素是完全不透明的：第一個矩形和線。第一個矩形不與任何選擇器匹配，因此不應用任何 CSS，並且 fill 完全不透明。line 匹配，並設定了 fill-opacity: 10%。然而，線沒有 fill 繪製操作——只有 stroke 可見——因此宣告沒有效果。
規範
| 規範 |
|---|
| CSS 填充與描邊模組 Level 3 # fill-opacity |
瀏覽器相容性
載入中…
另見
- SVG
fill-opacity屬性 - 展示屬性：
fill-opacity、clip-rule、color-interpolation-filters、fill-rule、fill、marker-end、marker-mid、marker-start、shape-rendering、stop-color、stop-opacity、stroke、stroke-dasharray、stroke-dashoffset、stroke-linecap、stroke-linejoin、stroke-miterlimit、stroke-opacity、stroke-width、text-anchor和vector-effect opacitybackground-color<color><basic-shape>資料型別