内容表

• 范例
• 用法注意事项
• 规范
• 浏览器兼容性
• 另请参阅

opacity

1. SVG 元素

   1. A
      1. <a>
      2. <altGlyph>
      3. <altGlyphDef>
      4. <altGlyphItem>
      5. <animate>
      6. <animateColor>
      7. <animateMotion>
      8. <animateTransform>
   2. B-C
      1. <circle>
      2. <clipPath>
      3. <color-profile>
      4. <cursor>
   3. D
      1. <defs>
      2. <desc>
   4. E
      1. <ellipse>
   5. F
      1. <feBlend>
      2. <feColorMatrix>
      3. <feComponentTransfer>
      4. <feComposite>
      5. <feConvolveMatrix>
      6. <feDiffuseLighting>
      7. <feDisplacementMap>
      8. <feDistantLight>
      9. <feFlood>
      10. <feFuncA>
      11. <feFuncB>
      12. <feFuncG>
      13. <feFuncR>
      14. <feGaussianBlur>
      15. <feImage>
      16. <feMerge>
      17. <feMergeNode>
      18. <feMorphology>
      19. <feOffset>
      20. <fePointLight>
      21. <feSpecularLighting>
      22. <feSpotLight>
      23. <feTile>
      24. <feTurbulence>
      25. <filter>
      26. <font>
      27. <font-face>
      28. <font-face-format>
      29. <font-face-name>
      30. <font-face-src>
      31. <font-face-uri>
      32. <foreignObject>
   6. G
      1. <g>
      2. <glyph>
      3. <glyphRef>
   7. H
      1. <hkern>
   8. I
      1. <image>
   9. J-L
      1. <line>
      2. <linearGradient>
   10. M
       1. <marker>
       2. <mask>
       3. <metadata>
       4. <missing-glyph>
       5. <mpath>
   11. N-P
       1. <path>
       2. <pattern>
       3. <polygon>
       4. <polyline>
   12. Q-R
       1. <radialGradient>
       2. <rect>
   13. S
       1. <script>
       2. <set>
       3. <stop>
       4. <style>
       5. <svg>
       6. <switch>
       7. <symbol>
   14. T
       1. <text>
       2. <textPath>
       3. <title>
       4. <tref>
       5. <tspan>
   15. U
       1. <use>
   16. V-Z
       1. <view>
       2. <vkern>

opacity attribute specifies the transparency of an object or of a group of objects, that is, the degree to which the background behind the element is overlaid.

注意： As a presentation attribute, opacity can be used as a CSS property. See the css opacity property for more information.

You can use this attribute with the following SVG elements:

• <a>
• <audio>
• <canvas>
• <circle>
• <ellipse>
• <foreignObject>
• <g>
• <iframe>
• <image>
• <line>
• <marker>
• <path>
• <polygon>
• <polyline>
• <rect>
• <svg>
• <switch>
• <symbol>
• <text>
• <textPath>
• <tspan>
• <use>
• <unknown>
• <video>

范例

html, body, svg {
  height: 100%;
}

					

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%">
      <stop offset="0%" style="stop-color:skyblue;" />
      <stop offset="100%" style="stop-color:seagreen;" />
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" />
  <circle cx="50" cy="50" r="40" fill="black" />
  <circle cx="150" cy="50" r="40" fill="black" opacity="0.3" />
</svg>

					

用法注意事项

默认值	1
值	<alpha-value>
Animatable	Yes

<alpha-value>

The uniform opacity setting to be applied across an entire object, as a <number> . Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range.

规范

规范	状态	注释
CSS Color Module Level 4 The definition of 'opacity' in that specification.	工作草案	Defines in more detail what this attribute applies to.
CSS Color Module Level 3 The definition of 'opacity' in that specification.	推荐	Defines in more detail what this attribute applies to.
Scalable Vector Graphics (SVG) 2 The definition of 'opacity' in that specification.	候选推荐	References the specification in CSS Color 3 and notes that there are some related attributes.
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'opacity' in that specification.	推荐	初始定义

浏览器兼容性

BCD tables only load in the browser

另请参阅

• css opacity

Found a problem with this page?

• Edit on GitHub
• Source on GitHub
• Report a problem with this content on GitHub
• Want to fix the problem yourself? See our Contribution guide .

最后修改： Sep 23, 2021 , 由 MDN 贡献者