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 Juli 2015.
Die flood-opacity CSS Eigenschaft definiert die Deckkraft der aktuellen Filter-Primitive-Subregion in <feFlood>- und <feDropShadow>-Elementen innerhalb eines <filter>. Ist sie vorhanden, überschreibt sie das flood-opacity-Attribut des Elements.
Der Wert dieser Eigenschaft beeinflusst den Alpha-Kanal des flood-color; sie kann die Transparenz einer flood-color erhöhen, jedoch nicht die durch die flood-color Eigenschaft definierte Farbe undurchsichtiger machen.
Hinweis:
Die flood-opacity Eigenschaft 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
/* 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
Der <opacity-value> ist eine <number> oder <percentage>, die die Deckkraft des SVG-Gradienten <flood> Elements angibt.
<number>-
Ein numerischer Wert zwischen
0und1, inklusive. <percentage>-
Ein prozentualer Wert zwischen
0%und100%, inklusive.
Mit 0 oder 0% ist der Flood vollständig transparent. Mit 1 oder 100% ist das Element die volle Deckkraft des flood-color Wertes, der teilweise oder vollständig opak sein kann.
Formale Definition
| Anfangswert | black |
|---|---|
| Anwendbar auf | <feFlood> and <feDropShadow> elements in <svg> |
| Vererbt | Nein |
| Berechneter Wert | der angegebene Wert, auf den Bereich [0,1] abgeschnitten |
| Animationstyp | by computed value |
Formale Syntax
flood-opacity =
<'opacity'>
<opacity> =
<opacity-value>
<opacity-value> =
<number> |
<percentage>
Beispiele
Definition der Flutopazität 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, jedes mit einem <feFlood>-Kind. Die <feFlood> definieren die Filter als seagreen, wobei das erste durch sein flood-opacity Attribut als vollständig opak und das zweite als vollständig transparent deklariert ist. Wir haben zwei <rect>-Elemente hinzugefügt, jedes mit einem Filterattribut.
<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 einen sich wiederholenden linearen Verlauf als background-image im SVG hinzu, damit die Deckkraft der flood-color besser sichtbar ist:
svg {
background-image: repeating-linear-gradient(
45deg,
transparent 0 9px,
#cccccc 0px 10px
);
}
rect {
width: 100px;
height: 100px;
x: 10px;
y: 10px;
}
#r2 {
x: 150px;
}
Wir wenden dann verschiedene Flutopazitätswerte auf die <feFlood>-Elemente mit der CSS flood-opacity Eigenschaft an:
#flood1 feFlood {
flood-opacity: 0.5;
}
#flood2 feFlood {
flood-opacity: 90%;
}
Ergebnisse
Die Attribute definierten das erste Quadrat als vollständig opak und das zweite als vollständig transparent, aber diese Werte wurden durch die CSS flood-opacity Werte überschrieben. Die seagreen-Filter sind 50% bzw. 90% opak.
Spezifikationen
| Specification |
|---|
| Filter Effects Module Level 1 # FloodOpacityProperty |
Browser-Kompatibilität
Loading…
Siehe auch
flood-colorfillstop-opacitystroke-opacityopacitybox-shadowtext-shadow<filter-function>, inklusiveopacity()- SVG
flood-opacityAttribut