flood-opacity CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
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 Eigenschaftswert wirkt sich auf den Alpha-Kanal des flood-color aus; er kann die Transparenz einer flood-color erhöhen, jedoch nicht die Farbe, die durch die flood-color-Eigenschaft definiert wird, 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, einschließlich. <percentage>-
Ein Prozentwert zwischen
0%und100%, einschließlich.
Mit 0 oder 0% ist die Flutung vollständig transparent. Mit 1 oder 100% ist das Element vollständig in der Opazität 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
Definition der Flut-Opazitä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, die jeweils ein <feFlood>-Kind enthalten. Die <feFlood> definieren die Filter als seagreen, wobei der erste durch sein flood-opacity-Attribut als vollständig undurchsichtig und der zweite als vollständig transparent deklariert wird. Wir haben zwei <rect>-Elemente hinzugefügt, die jeweils ein Filterattribut haben.
<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 auf dem SVG hinzu, sodass die Deckkraft der Flutfarbe deutlicher wird:
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 Flut-Opazitätswerte auf die <feFlood>-Elemente mithilfe 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üne Filter sind jeweils zu 50 % und 90 % undurchsichtig.
Spezifikationen
| Spezifikation |
|---|
| Filter Effects Module Level 1 # FloodOpacityProperty |
Browser-Kompatibilität
Siehe auch
flood-colorfillstop-opacitystroke-opacityopacitybox-shadowtext-shadow<filter-function>, einschließlichopacity()- SVG
flood-opacityAttribut