flood-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.

Die flood-opacity CSS Eigenschaft definiert die Deckkraft der aktuellen Filter-Primitive-Unterregion in <feFlood> und <feDropShadow> Elementen innerhalb eines <filter>. Wenn vorhanden, überschreibt sie das flood-opacity Attribut des Elements.

Der Wert der Eigenschaft beeinflusst den Alpha-Kanal der flood-color; er kann die Transparenz einer flood-color erhöhen, kann jedoch nicht die durch die flood-color Eigenschaft definierte Farbe undurchsichtiger machen.

Hinweis: Die Eigenschaft flood-opacity gilt nur für <feFlood> und <feDropShadow> Elemente, die in einem <svg> verschachtelt sind. Sie gilt nicht für andere SVG-, HTML- oder Pseudo-Elemente.

Syntax

css
/* numeric and percentage values */
flood-opacity: 0.2;
flood-opacity: 20%;

/* Global values */
flood-opacity: inherit;
flood-opacity: initial;
flood-opacity: revert;
flood-opacity: revert-layer;
flood-opacity: unset;

Werte

Das <opacity-value> ist eine <number> oder <percentage>, die die Deckkraft des SVG-Verlaufs <flood> Elements angibt.

<number>

Ein numerischer Wert zwischen 0 und 1, einschließlich.

<percentage>

Ein Prozentwert zwischen 0% und 100%, einschließlich.

Mit 0 oder 0% eingestellt ist die Überflutung vollständig transparent. Mit 1 oder 100% eingestellt ist das Element die volle Deckkraft des flood-color Wertes, der möglicherweise teilweise undurchsichtig ist.

Formale Definition

Anfangswertblack
Anwendbar auf<feFlood> and <feDropShadow> elements in <svg>
VererbtNein
Berechneter Wertder angegebene Wert, auf den Bereich [0,1] abgeschnitten
Animationstypby computed value

Formale Syntax

flood-opacity = 
<'opacity'>

<opacity> =
<opacity-value>

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

Beispiele

Definition der Flutdeckkraft eines Filters

Dieses Beispiel zeigt den grundlegenden Anwendungsfall von flood-opacity und wie die CSS flood-opacity Eigenschaft Vorrang vor dem flood-opacity Attribut hat.

HTML

Wir haben ein SVG mit einigen <filter> Elementen, von denen jedes ein <feFlood> Kind hat. Die <feFlood> definieren die Filter als seagreen, wobei das erste durch sein flood-opacity Attribut als vollständig undurchsichtig und das zweite als vollständig transparent deklariert ist. Wir haben zwei <rect> Elemente eingefügt, von denen jedes ein Filterattribut hat.

html
<svg viewBox="0 0 420 120" xmlns="http://www.w3.org/2000/svg">
  <filter id="flood1">
    <feFlood flood-color="seagreen" flood-opacity="1" />
  </filter>
  <filter id="flood2">
    <feFlood flood-color="seagreen" flood-opacity="0" />
  </filter>

  <rect id="r1" filter="url(#flood1)" />
  <rect id="r2" filter="url(#flood2)" />
</svg>

CSS

Wir definieren die height, width, x und y Positionierung unserer Rechtecke mit CSS und fügen ein sich wiederholendes lineares Gradient als background-image auf dem SVG hinzu, damit die Deckkraft der Füllfarbe deutlicher wird:

css
svg {
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 9px,
    #ccc 0px 10px
  );
}
rect {
  width: 100px;
  height: 100px;
  x: 10px;
  y: 10px;
}
#r2 {
  x: 150px;
}

Wir wenden dann unterschiedliche Werte für die Flutdeckkraft auf die <feFlood> Elemente an, indem wir die CSS flood-opacity Eigenschaft verwenden:

css
#flood1 feFlood {
  flood-opacity: 0.5;
}
#flood2 feFlood {
  flood-opacity: 90%;
}

Ergebnisse

Die Attribute definierten das erste Quadrat als vollständig undurchsichtig und das zweite als vollständig transparent, aber diese Werte wurden von den CSS flood-opacity Werten überschrieben. Die seagreen Filter sind jeweils 50% und 90% undurchsichtig.

Spezifikationen

Specification
Filter Effects Module Level 1
# FloodOpacityProperty

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
flood-opacity

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch