fill-opacity

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨April 2017⁩.

Die fill-opacity CSS Eigenschaft definiert die Opazität des Malvorgangs (Farbe, Verlauf, Muster usw.), der auf SVG-Formen oder Textelemente angewendet wird, um das Element zu füllen. Die Eigenschaft definiert nur die Opazität des fill des Elements; sie beeinflusst nicht den stroke. Wenn vorhanden, überschreibt sie das fill-opacity Attribut des Elements.

Hinweis: Die fill-opacity Eigenschaft gilt nur für <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, und <tspan> Elemente, die in einem <svg> verschachtelt sind. Sie gilt nicht für andere SVG-, HTML- oder Pseudo-Elemente.

Syntax

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;

Werte

Die Werte <number> und <percentage> geben die Opazität des fill des Elements an.

<number>: Ein numerischer Wert zwischen 0 und 1, einschließlich.
<percentage>: Ein Prozentwert zwischen 0% und 100%, einschließlich.

Mit 0 oder 0% ist das Element vollständig transparent. Mit 1 oder 100% ist das Element vollständig undurchsichtig. Mit Werten dazwischen ist das Element halbtransparent, wobei der Inhalt hinter dem Element sichtbar ist.

Formale Definition

Anfangswert	`1`
Anwendbar auf	SVG shapes and text content elements
Vererbt	Ja
Prozentwerte	map to the range `[0,1]`
Berechneter Wert	Derselbe wie der angegebene Wert nachdem die `<number>` auf den Bereich [0.0, 1.0] zugeschnitten wurde.
Animationstyp	by computed value type

Formale Syntax

fill-opacity = 
  <'opacity'>  

<opacity> = 
  <opacity-value>  

<opacity-value> = 
  <number>      |
  <percentage>

Beispiele

Die Deckkraft von SVG-Elementen definieren

Dieses Beispiel zeigt den grundlegenden Anwendungsfall von fill-opacity und wie die CSS fill-opacity Eigenschaft das fill-opacity Attribut überschreibt und keinen Einfluss auf einen stroke hat, der auf eine Form angewendet wird.

HTML

Wir fügen mehrere verschiedene SVG-Grafikelemente ein und setzen das fill-opacity Attribut jedes Einzelnen auf 1 (außer line), was bedeutet, dass der fill jedes Elements undurchsichtig ist. Das fill-opacity SVG-Attribut gilt nicht für <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

Mit CSS verwenden wir die fill-opacity Eigenschaft, um den Wert des SVG fill-opacity Attributs zu überschreiben und jedem SVG-Element einen anderen Wert zu geben.

Wir fügen einem Kreis und einer Ellipse ein stroke hinzu, um zu zeigen, dass die Opazität des Strokes nicht von der fill-opacity Eigenschaft beeinflusst wird.

Weitere SVG-Stile werden gesetzt, einschließlich eines Hintergrundbildes, damit die Opazität jedes Elements besser erkennbar ist. Diese sind aus Gründen der Kürze nicht dargestellt.

svg {
  border: 1px solid;
  height: calc(100vh - 20px);
  background: repeating-linear-gradient(
    to bottom right,
    transparent 0 10px,
    #cccccc 10px 11px
  );
}

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;
}

Ergebnisse

Nur zwei Elemente sind vollständig undurchsichtig: das erste Rechteck und die Linie. Das erste Rechteck wird von keinem der Selektoren erfasst, daher wird kein CSS angewendet und der fill ist vollständig undurchsichtig. Die line wird erfasst, mit fill-opacity: 10% gesetzt. Allerdings hat die Linie keinen fill Malvorgang — nur der stroke ist sichtbar — daher hat die Deklaration keine Wirkung.

Spezifikationen

Specification
CSS Fill and Stroke Module Level 3 # fill-opacity

Browser-Kompatibilität

Siehe auch

SVG fill-opacity Attribut
Präsentationseigenschaften: 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, und vector-effect
opacity
background-color
<color>
<basic-shape> Datentyp

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden