opacity
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Das opacity
-Attribut legt die Transparenz eines Objekts oder einer Gruppe von Objekten fest, also den Grad, zu dem der Hintergrund hinter dem Element überlagert wird.
Hinweis:
Als Präsentationsattribut hat opacity
auch ein entsprechendes CSS-Property: opacity
. Wenn beide angegeben sind, hat das CSS-Property Vorrang.
Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
<a>
<circle>
<ellipse>
<foreignObject>
<g>
<image>
<line>
<marker>
<path>
<polygon>
<polyline>
<rect>
<svg>
<switch>
<symbol>
<text>
<textPath>
<tspan>
<use>
Anders als fill-opacity
, stroke-opacity
und stop-opacity
, die auf einzelne Operationen angewendet werden und während des Renderns des Elements gerendert werden, wird opacity
auf ganze Objekte oder Gruppen angewendet. Es funktioniert daher eher wie ein Nachbearbeitungsvorgang auf dem gerenderten Bild des Objektes oder der Gruppe. Wenn Sie also sowohl opacity
als auch andere Opazitätsattribute im selben Bereich verwenden, werden diese übereinander gelegt und die Opazität wird multipliziert.
Beispiel
<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>
Hinweise zur Nutzung
Standardwert | 1 |
---|---|
Wert | <alpha-value> |
Animierbar | Ja |
<alpha-value>
-
Die einheitliche Opazitätseinstellung, die auf ein gesamtes Objekt angewendet wird, als
<number>
. Alle Werte außerhalb des Bereichs von 0.0 (vollständig transparent) bis 1.0 (vollständig undurchsichtig) werden auf diesen Bereich begrenzt.
Spezifikationen
Specification |
---|
CSS Color Module Level 4 # propdef-opacity |
Scalable Vector Graphics (SVG) 2 # ObjectAndGroupOpacityProperties |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
opacity |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Requires a vendor prefix or different name for use.
- Has more compatibility info.
Siehe auch
- CSS
opacity
-Property fill-opacity
stop-opacity
stroke-opacity