Basic CSS - comment superposer un DIV avec un DIV semi-transparent en haut

Question

J'ai du mal à obtenir un rendu correct dans mon navigateur (Chrome). J'ai un wrapper qui contient tous les éléments du HTML, et je veux avoir un DIV (appelons-le div-1) qui contient une image, et qui a un div superposé sur le dessus à gauche, comme je l'ai esquissé dans cette image... des solutions rapides ?

Answer 1

Voici une solution CSS pure, similaire à la réponse de DarkBee, mais sans avoir besoin d'un élément supplémentaire de type .wrapper div :

.dimmed {
  position: relative;
}

.dimmed:after {
  content: " ";
  z-index: 10;
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}

J'utilise ici rgba, mais vous pouvez bien sûr utiliser d'autres méthodes de transparence si vous le souhaitez.

Answer 2

En utilisant CSS3, vous n'avez pas besoin de créer votre propre image avec la transparence.

Il suffit d'avoir une div avec ce qui suit

position:absolute;
left:0;
background: rgba(255,255,255,.5);

Le dernier paramètre en arrière-plan (.5) est le niveau de transparence (un chiffre plus élevé est plus opaque).

Exemple de violon

Answer 3

.foo {
   position : relative;
}
.foo .wrapper {
    background-image : url('semi-trans.png');
    z-index : 10;
    position : absolute;
    top : 0;
    left : 0;
}

<div class="foo">
   <img src="example.png" />
   <div class="wrapper">&nbsp;</div>
</div>

Answer 4

Pour un élément div, il suffit de définir l'opacité au moyen d'une classe pour activer ou désactiver l'effet.

.mute-all {
   opacity: 0.4;
}

Answer 5

Comme la réponse précédente, mais je mettrais ::avant, juste pour des raisons d'empilement. Si vous voulez inclure du texte par-dessus la superposition (un cas d'utilisation courant), l'utilisation de ::before devrait résoudre le problème.

.dimmed {
  position: relative;
}

.dimmed:before {
  content: " ";
  z-index: 10;
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}