fill-opacity CSS property

Syntax

/* 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 <number>- und <percentage>-Werte geben die Deckkraft 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. Bei Werten dazwischen ist das Element halbtransparent, sodass der Inhalt hinter dem Element sichtbar ist.

Formale Definition

Formale Syntax

fill-opacity = 
  <'opacity'>  

<opacity> = 
  <opacity-value>  

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

Beispiele

Festlegen der Füll-Deckkraft von SVG-Elementen

Dieses Beispiel zeigt den grundlegenden Anwendungsfall von fill-opacity und wie die CSS-Eigenschaft fill-opacity das SVG-Attribut fill-opacity überschreibt und keine Auswirkung 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 die Füllung jedes Elements undurchsichtig ist. Das fill-opacity SVG-Attribut gilt nicht für <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

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

Wir fügen einen stroke zu Kreis und Ellipse hinzu, um zu zeigen, dass die Deckkraft des Strokes nicht von der fill-opacity-Eigenschaft beeinflusst wird.

Andere SVG-Stile werden festgelegt, einschließlich eines Hintergrundbildes, um die Deckkraft jedes Elements leichter sichtbar zu machen. Diese werden der Kürze halber nicht angezeigt.

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

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 getroffen, daher wird kein CSS angewendet und das fill ist vollständig undurchsichtig. Die line wird getroffen, mit fill-opacity: 10% gesetzt. Da die Linie jedoch keinen fill-Farbvorgang hat — nur der stroke ist sichtbar — hat die Deklaration keine Wirkung.

Spezifikationen

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