flood-color
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-color
CSS Eigenschaft definiert die Farbe der aktuellen Filterprimitive-Unterregion in <feFlood>
und <feDropShadow>
Elementen innerhalb eines <filter>
. Wenn vorhanden, überschreibt sie das Attribut flood-color
des Elements.
Hinweis: Die Eigenschaft flood-color
gilt nur für die Elemente <feFlood>
und <feDropShadow>
innerhalb eines <svg>
. Sie gilt nicht für andere SVG-, HTML- oder Pseudo-Elemente.
Syntax
/* <color> values */
flood-color: red;
flood-color: hsl(120deg 75% 25% / 60%);
flood-color: currentcolor;
/* Global values */
flood-color: inherit;
flood-color: initial;
flood-color: revert;
flood-color: revert-layer;
flood-color: unset;
Werte
Formale Definition
Formale Syntax
flood-color =
<color>
Beispiele
Die Farbe eines Filters Flood definieren
Dieses Beispiel demonstriert die grundlegende Verwendung von flood-color
und wie die CSS-Eigenschaft flood-color
Vorrang vor dem Attribut flood-color
hat.
HTML
Wir haben ein SVG mit zwei <filter>
Elementen, die jeweils ein <feFlood>
Kind enthalten. Jedes <feFlood>
Element beinhaltet das SVG-Attribut flood-color
, das die Flood-Farbe als seagreen
festlegt. Wir haben zwei <rect>
Elemente mit einem Filterattribut eingefügt; hier werden die Filter angezeigt.
<svg viewBox="0 0 420 120" xmlns="http://www.w3.org/2000/svg">
<filter id="flood1">
<feFlood flood-color="seagreen" />
</filter>
<filter id="flood2">
<feFlood flood-color="seagreen" />
</filter>
<rect id="r1" filter="url(#flood1)" />
<rect id="r2" filter="url(#flood2)" />
</svg>
CSS
Wir definieren die Größe und Position unseres <rect>
mit den CSS-Eigenschaften height
, width
, x
und y
:
rect {
width: 100px;
height: 100px;
x: 10px;
y: 10px;
}
#r2 {
x: 150px;
}
Dann wenden wir verschiedene Flood-Farbwerte auf die <feFlood>
Elemente mit der CSS-Eigenschaft flood-color
an. Wir verwenden eine benannte Farbe und eine 3-stellige hexadezimale Farbe, aber wir können jede gültige CSS-Farbsyntax verwenden:
#flood1 feFlood {
flood-color: rebeccapurple;
}
#flood2 feFlood {
flood-color: #f36;
}
Ergebnisse
Die Attribute haben die Quadrate als seagreen definiert, aber diese Werte wurden durch die CSS flood-color
Werte überschrieben.
Spezifikationen
Specification |
---|
Filter Effects Module Level 1 # FloodColorProperty |
Browser-Kompatibilität
BCD tables only load in the browser