Flood-color et flood-opacity, propriétés CSS

flood-color

flood-opacity

Résumé des caractéristiques de la propriété `flood-color`

Description rapide

Définit la couleur des remplissages et des ombrages dans le contexte de filtres SVG.

Statut

Standard

Utilisable sur

SVG

Pourcentages

Ne s'appliquent pas.

Valeur initiale

black

Héritée par défaut

Non.

Type d'animation

Computed value : lors d'une animation, la propriété flood-color passe progressivement d'une valeur à une autre.

Module W3C

Module filtres et effets

Références (W3C)

Filter Effects Module Level 1

Statut du document: WD (document de travail)

Description des propriétés `flood-color` et `flood-opacity`.

Ces deux propriétés définissent la couleur (flood-color) et l'opacité (flood-opacity) des remplissages et des ombrages. Elles sont utilisables en SVG sur les balises feFlood et feDropShadow.

Exemple de définition d'un filtre de remplissage et d'un filtre d'ombrage en SVG.


	filter id="flood1"
		feFlood x="0" y="0" width="200" height="200" flood-color="red" flood-opacity="0.5" /
	/filter
	filter id="shadow1"
		feDropShadow dx="10" dy="10" stdDeviation="0.5" flood-color="red" flood-opacity="0.5" /
	/filter

Remarque : sur l'exemple de code ci-dessus, la couleur et l'opacité sont définies par des attributs dans les balises, mais les propriétés CSS peuvent avantageusement remplacer ces attributs.

Sur les exemples ci-dessous un arrière-plan texturé a été ajouté pour mieux faire ressortir la transparence.

Valeurs pour `flood-color`.

flood-color: currentColor;

Les ombrages seront dessinés dans la couleur courante.
flood-color: #add8e6;

La couleur de l'ombrage peut être exprimée dans n'importe laquelle des syntaxes reconnues par CSS. Voir Les couleurs.

Valeurs pour `flood-opacity`.

flood-opacity: 0.8;

La valeur indiquée doit être un nombre positif compris entre 0 et 1 ou un pourcentage compris entre 0% et 100%.
0 correspond à la transparence totale, et 1 ou 100% à une opacité complète.

Valeurs communes à toutes les propriétés :


flood-color: initial  (black)
flood-color: inherit
flood-color: revert
flood-color: revertLayer
flood-color: unset


flood-opacity: initial  (1)
flood-opacity: inherit
flood-opacity: revert
flood-opacity: revertLayer
flood-opacity: unset

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple interactif avec la propriété `flood-color`.

Le simulateur vous permet de jouer avec la couleur et l'opacité du remplissage et de l'ombrage.

flood-color :

flood-opacity :

Prise en charge par les navigateurs (compatibilité).

Aucun problème de compatibilité n'est à signaler avec le propriétés flood-color et flood-color.

Colonne 1

Suport par les navigateurs de la propriété flood-color pour définir la couleur des ombrages.

Colonne 2

Support par les navigateurs de la propriété flood-opacity pour définir la transparence des ombrages.

Propriété
flood-color

Propriété
flood-opacity

Estimation de la prise en charge globale.

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Safari

Safari sur IOS

Opéra Mobile

QQ Browser

Baidu Browser

Chrome

Edge

Firefox

Opéra

Chrome pour Androïd

Samsung Internet

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété `flood-color`.

Module effets et filtres - Niveau 1

Ajout de la possibilité de filtrages graphiques en CSS (flou, mélanges, etc.) et introduction des propriétés flood-color et flood-opacity.

25 Octobre 2012
Document de travail.

Voir aussi, au sujet des filtres graphiques.

Les filtres et effets graphiques divers sont décrits dans la spécification nommée "Module filtres et effets" en français, ou "Filter Effects Module" en anglais. Voici les notions décrites dans ce document :

Propriétés :

backdrop-filter

Applique un filtre graphique sur l'élément situé derrière l'élément ciblé.

color-interpolation

Définit l'espace de couleurs à utiliser pour calculer les dégradés, les animations et les combinaisons avec la couche alpha.

color-interpolation-filters

Définit dans quel espace de couleurs sont calculés les effets de filtrage. Par défaut cet espace est le linearRGB

filter

Applique un filtre graphique (flou, contraste, luminosité...) à un élément.

flood-opacity

Définit l'opacité des remplissages et des ombrages dans le contexte de filtres SVG.

lighting-color

Définit la couleur de l'éclairage dans le contexte d'un filtre SVG.

Fonctions :

blur()

blur() est un filtre graphique utilisable avec la propriété filter. La fonction applique un effet de flou sur l'élément.

brightness()

Ajuste la luminosité d'un élément (filtre graphique).

contrast()

Ajuste le contraste d'un élément (filtre graphique).

drop-shadow()

Définit l'ombre d'un élément : dimensions, flou, couleur (filtre graphique).

grayscale()

Convertit un élément en nuances de gris (filtre graphique) de façon plus moins complète. A l'extrême les couleurs peuvent être complètement supprimées.

hue-rotate()

Change les couleurs d'une image en effectuant une rotation des teintes (filtre graphique).

invert()

Inverse les couleurs d'un élément (filtre graphique).

opacity()

Détermine le degré de transparence d'un élément (filtre graphique).

saturate()

Définit la saturation des couleurs d'un élément (filtre graphique).

sepia()

Applique un effet sépia à un élément (filtre graphique).