Dev Faq
0
votes

Comportement d'opacité inattendu

J'ai du mal à comprendre l'interaction CSS dans un projet que je travaille. Voici un codepen le recréant et le CSS que j'ai utilisé.

Codepen A > P> 

.container
  /*background is set to emulate the real use case*/
  background red
  height 400px
  width 600px
  position relative
  display flex
  justify-content center
  align-items center
  opacity 0.9
.blurred
  background-image url(https://ak0.picdn.net/shutterstock/videos/2696180/thumb/1.jpg)
  height 100%
  width 100%
  position absolute
  filter blur(7px)
  z-index -1
.text
  font-size 35px
  text-transform uppercase
  color brown
  /*this div is for comparison.
    at 0.9 opacity the white background under it is 
    not visible yet the image under .container is clearly
    visible at 0.9 opacity */
.comparison
  height 400px
  width 600px
  background red
  opacity 0.9

0 commentaires

3 Réponses :

0
votes

La couleur de fond passe derrière le contenu non sur le dessus, c'est pourquoi il s'appelle «retour». Donc, votre arrière-plan rouge est derrière votre .blaRraré et .text . .

1 commentaires

Je l'obtient, mais pourquoi ne va-t-il que dans l'opacité de 0,9 conteneur et plus bas? À 1 opacité, le fond couvre complètement l'image à l'intérieur. Pourquoi l'opacité influence-t-elle si l'arrière-plan est sur le dessus ou derrière le contenu du conteneur? C'est ce que j'ai des difficultés avec.

0
votes

Lorsque vous définissez une image de fond de la classe .Banner, cet élément est sur la couleur de fond. La raison pour laquelle votre comparaison ne perd pas autant de couleur est due autant qu'il n'y a rien devant la couleur de fond. Si vous définissez l'opacité de .blourré pour réduire son opacité et compenser la concurrence, vous obtiendrez l'effet souhaité.

0 commentaires
0
votes

Si vous voulez que la couleur de fond rouge "pose sur le dessus" de l'image de fond floue, vous pouvez essayer d'y ajouter en tant que gradient "image" comme ceci: xxx

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor