fill-opacity

**fill-opacity** CSS 属性定义应用于 SVG 形状或文本内容元素以填充元素的绘制操作（颜色、渐变、图案等）的不透明度。该属性仅定义元素的 fill 的不透明度；它不影响描边。如果存在，它会覆盖元素的 fill-opacity 属性。

注意：fill-opacity 属性仅适用于嵌套在 <svg> 中的 <circle>、<ellipse>、<path>、<polygon>、<polyline>、<rect>、<text>、<textPath> 和 <tspan> 元素。它不适用于其他 SVG、HTML 或伪元素。

语法

css
/* 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（含）之间的数字值。

<percentage>

介于 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>。

html
<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 样式，包括背景图像以使每个元素的不透明度更容易看到。为了简洁起见，这些内容未显示。

css
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 Fill and Stroke 模块 Level 3
# fill-opacity

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅