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é CSS flood-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 SVG flood-opacity de l'élément.
La valeur de la propriété agit sur le canal alpha de la flood-color ; elle peut augmenter la transparence d'une flood-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
/* 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 entre
0et1, inclus. <percentage>-
Une valeur en pourcentage comprise entre
0%et100%, inclus.
Avec 0 ou 0%, le remplissage est totalement transparent. Avec 1 ou 100%, l'élément a l'opacité totale de la valeur flood-color, qui peut être partiellement opaque ou non.
Définition formelle
| Valeur initiale | black |
|---|---|
| Applicabilité | <feFlood> and <feDropShadow> elements in <svg> |
| Héritée | non |
| Valeur calculée | la valeur spécifiée, écrêtée à l'intervalle [0,1] |
| Type d'animation | by computed value |
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 de flood-opacity, et comment la propriété CSS flood-opacity prend le dessus sur l'attribut flood-opacity.
HTML
Nous avons un SVG avec plusieurs éléments <filter>, chacun contenant un enfant <feFlood>. Les <feFlood> définissent les filtres comme seagreen, le premier étant déclaré par son attribut flood-opacity comme totalement opaque et le second comme totalement transparent. Nous avons inclus deux éléments <rect>, chacun avec un attribut de filtre.
<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
Nous définissons la height, la width, la x et la y, la position de nos rectangles avec le CSS, et nous incluons un dégradé linéaire répété comme background-image sur le SVG afin que l'opacité de la couleur de remplissage soit plus visible :
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é CSS flood-opacity :
#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 CSS flood-opacity. Les filtres vert marin sont respectivement opaques à 50% et 90%.
Spécifications
| Specification |
|---|
| Filter Effects Module Level 1 # FloodOpacityProperty |
Compatibilité des navigateurs
Voir aussi
- La propriété
flood-color - La propriété
fill - La propriété
stop-opacity - La propriété
stroke-opacity - La propriété
opacity - La propriété
box-shadow - La propriété
text-shadow - Le type de donnée
<filter-function>, incluant la fonctionopacity() - L'attribut SVG
flood-opacity