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-Primitiv-Unterregion in <feFlood> und <feDropShadow> Elementen innerhalb eines <filter>. Falls vorhanden, überschreibt sie das flood-opacity Attribut des Elements.
Der Eigenschaftswert beeinflusst den Alpha-Kanal des flood-color; er kann die Transparenz einer flood-color erhöhen, aber die durch die Eigenschaft flood-color definierte Farbe nicht deckender machen.
Hinweis:
Die flood-opacity Eigenschaft gilt nur für <feFlood> und <feDropShadow> Elemente, die in einem <svg> eingebettet 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, einschließlich. <percentage>-
Ein Prozentwert zwischen
0%und100%, einschließlich.
Mit 0 oder 0% eingestellt, ist der Flutbereich vollständig transparent. Mit 1 oder 100% eingestellt, hat das Element die volle Deckkraft des flood-color Werts, der möglicherweise teilweise undurchsichtig ist.
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
Definieren der Flutdeckkraft eines Filters
Dieses Beispiel zeigt die grundlegende Anwendung 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 undurchsichtig und das zweite als vollständig transparent deklariert ist. Wir haben zwei <rect> Elemente eingefügt, die jeweils ein Filterattribut besitzen.
<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 ein, um die Deckkraft der Flutfarbe deutlicher zu machen:
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;
}
Dann wenden wir verschiedene Flutdeckkraft-Werte 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 undurchsichtig und das zweite als vollständig transparent, aber diese Werte wurden durch die CSS flood-opacity Werte überschrieben. Die seagrünen Filter sind jeweils 50% und 90% undurchsichtig.
Spezifikationen
| Specification |
|---|
| Filter Effects Module Level 1 # FloodOpacityProperty |
Browser-Kompatibilität
Loading…
Siehe auch
flood-colorfillstop-opacitystroke-opacityopacitybox-shadowtext-shadow<filter-function>, einschließlichopacity()- SVG
flood-opacityAttribut