fill-opacity

Syntaxe

/* Valeurs numériques et en pourcentage */
fill-opacity: 0.2;
fill-opacity: 20%;

/* Valeurs globales */
fill-opacity: inherit;
fill-opacity: initial;
fill-opacity: revert;
fill-opacity: revert-layer;
fill-opacity: unset;

Valeurs

Les valeurs de type <number> et <percentage> indiquent l'opacité du fill de l'élément.

<number>

Une valeur numérique comprise entre 0 et 1, inclus.

<percentage>

Une valeur en pourcentage comprise entre 0% et 100%, inclus.

Avec 0 ou 0%, l'élément est entièrement transparent. Avec 1 ou 100%, l'élément est entièrement opaque. Avec des valeurs intermédiaires, l'élément est semi-transparent, le contenu situé derrière l'élément étant visible.

Définition formelle

Syntaxe formelle

fill-opacity = 
  <'opacity'>  

<opacity> = 
  <opacity-value>  

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

Exemples

Définir l'opacité de remplissage des éléments SVG

Cet exemple illustre le cas d'utilisation de base de fill-opacity, et comment la propriété CSS fill-opacity prend le pas sur l'attribut fill-opacity et n'a aucun effet sur un éventuel stroke appliqué à une forme.

HTML

Nous incluons plusieurs éléments graphiques SVG différents et définissons l'attribut fill-opacity de chacun à 1 (sauf line), ce qui signifie que le remplissage de chaque élément est opaque. L'attribut SVG fill-opacity ne s'applique pas à <line>.

<svg viewBox="0 0 100 150" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="30" height="30" fill-opacity="1" />
  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" fill-opacity="1" />
  <circle cx="25" cy="75" r="20" fill-opacity="1" />
  <ellipse cx="75" cy="75" rx="20" ry="10" fill-opacity="1" />
  <line x1="50" x2="90" y1="40" y2="60" stroke="black" stroke-width="5" />
  <polyline
    points="60 90 65 100 70 95 75 110 80 105 85 120 90 115 95 130 100 125"
    fill-opacity="1" />
  <path d="M20,130 Q40,105 50,130 T90,130" fill-opacity="1" />
</svg>

CSS

Avec CSS, nous utilisons la propriété fill-opacity pour remplacer la valeur de l'attribut SVG fill-opacity, en donnant à chaque élément SVG une valeur différente.

Nous ajoutons un stroke au cercle et à l'ellipse, pour montrer que l'opacité du contour n'est pas affectée par la propriété fill-opacity.

D'autres styles SVG sont appliqués, notamment une image d'arrière-plan pour permettre de mieux voir l'opacité de chaque élément. Ceux-ci ne sont pas affichés ici pour plus de concision.

svg {
  border: 1px solid;
  height: calc(100vh - 20px);
  background: repeating-linear-gradient(
    to bottom right,
    transparent 0 10px,
    #cccccc 10px 11px
  );
}

svg > * {
  fill: black;
}
rect:last-of-type {
  fill-opacity: 0.1;
}
circle {
  fill-opacity: 0.6;
}
ellipse {
  fill-opacity: 40%;
}
line {
  fill-opacity: 10%;
}
polyline {
  fill-opacity: 50%;
}
path {
  fill-opacity: 0.5;
}

circle,
ellipse {
  stroke: black;
  stroke-width: 3px;
}

Résultat

Seuls deux éléments sont entièrement opaques : le premier rectangle et la ligne. Le premier rectangle n'est ciblé par aucun sélecteur, donc aucun CSS n'est appliqué et le fill est totalement opaque. La line est ciblée, avec fill-opacity: 10%. Cependant, la ligne n'a pas d'opération de peinture de remplissage — seul le stroke est visible — donc la déclaration n'a aucun effet.

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'attribut SVG fill
• Propriétés de présentation : fill-opacity, clip-rule, color-interpolation-filters, fill, fill-rule, marker-end, marker-mid, marker-start, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor et vector-effect
• La propriété opacity
• La propriété background-color
• Le type de donnée <color>
• Le type de donnée <basic-shape>