Maison >interface Web >tutoriel CSS >Pourquoi ma superposition de dégradé CSS n'apparaît-elle pas sur mon image d'arrière-plan ?

Pourquoi ma superposition de dégradé CSS n'apparaît-elle pas sur mon image d'arrière-plan ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-12-04 05:46:10437parcourir

Why Doesn't My CSS Gradient Overlay Appear Over My Background Image?

Superposition de dégradés sur les images d'arrière-plan : une énigme CSS résolue

Tenter d'appliquer une superposition de dégradés à votre image d'arrière-plan pour un effet de fondu élégant peut être une tâche déroutante. Malgré la spécification du dégradé et de l'image dans le CSS, un seul calque semble s'afficher.

Pour résoudre ce problème, révisez la structure du code et assurez-vous que l'URL de l'image d'arrière-plan est placée à la fin. de la déclaration de style. La syntaxe correcte est la suivante :

.css {
  background: 
   linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%),
   url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
  height: 200px;
}

Cette modification garantit que l'image d'arrière-plan est placée au-dessus du calque dégradé, ce qui donne un mélange homogène.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn