flood-opacity

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

La propriétéCSSflood-opacity définit l'opacité de la sous-région primitive du filtre en cours dans les éléments SVG<feFlood> et<feDropShadow> à l'intérieur d'un<filter>. Si elle est présente, elle remplace l'attribut SVGflood-opacity de l'élément.

La valeur de la propriété agit sur le canal alpha de laflood-color ; elle peut augmenter la transparence d'uneflood-color mais ne peut pas rendre la couleur définie par la propriétéflood-color plus opaque.

Note :La propriétéflood-opacity ne s'applique qu'aux éléments SVG<feFlood> et<feDropShadow> imbriqués dans un<svg>. Elle ne s'applique pas aux autres éléments SVG, HTML ou pseudo-éléments.

Syntaxe

css

/* Valeurs numériques et pourcentages */flood-opacity: 0.2;flood-opacity: 20%;/* Valeurs globales */flood-opacity: inherit;flood-opacity: initial;flood-opacity: revert;flood-opacity: revert-layer;flood-opacity: unset;

Valeurs

La valeur<opacity-value> est un<number> ou un<percentage> indiquant l'opacité de l'élément SVG<flood>.

<number>: Une valeur numérique comprise entre0 et1, inclus.
<percentage>: Une valeur en pourcentage comprise entre0% et100%, inclus.

Avec0 ou0%, le remplissage est totalement transparent. Avec1 ou100%, l'élément a l'opacité totale de la valeurflood-color, qui peut être partiellement opaque ou non.

Définition formelle

Valeur initiale	`black`
Applicabilité	éléments`<feFlood>` et`<feDropShadow>` dans`<svg>`
Héritée	non
Valeur calculée	la valeur définie, écrêtée à l'intervalle`[0,1]`
Type d'animation	par valeur calculée

Syntaxe formelle

flood-opacity =
<'opacity'>

<opacity> =
<opacity-value>

<opacity-value> =
<number>|
<percentage>

Exemples

Définir l'opacité du remplissage d'un filtre

Cet exemple montre le cas d'utilisation basique deflood-opacity, et comment la propriété CSSflood-opacity prend le dessus sur l'attributflood-opacity.

HTML

Nous avons un SVG avec plusieurs éléments<filter>, chacun contenant un enfant<feFlood>. Les<feFlood> définissent les filtres commeseagreen, le premier étant déclaré par son attributflood-opacity comme totalement opaque et le second comme totalement transparent. Nous avons inclus deux éléments<rect>, chacun avec un attribut de filtre.

html

<svg viewBox="0 0 420 120" xmlns="http://www.w3.org/2000/svg">  <filter>    <feFlood flood-color="seagreen" flood-opacity="1" />  </filter>  <filter>    <feFlood flood-color="seagreen" flood-opacity="0" />  </filter>  <rect filter="url(#flood1)" />  <rect filter="url(#flood2)" /></svg>

CSS

Nous définissons laheight, lawidth, lax et lay, la position de nos rectangles avec le CSS, et nous incluons un dégradé linéaire répété commebackground-image sur le SVG afin que l'opacité de la couleur de remplissage soit plus visible :

css

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;}

Nous appliquons ensuite différentes valeurs d'opacité de remplissage aux éléments<feFlood> en utilisant la propriété CSSflood-opacity :

css

#flood1 feFlood {  flood-opacity: 0.5;}#flood2 feFlood {  flood-opacity: 90%;}

Résultat

Les attributs définissaient le premier carré comme totalement opaque et le second comme totalement transparent, mais ces valeurs ont été remplacées par les valeurs CSSflood-opacity. Les filtres vert marin sont respectivement opaques à 50% et 90%.