web-dev-qa-db-fra.com

Superposer une image de fond avec une couleur de fond rgba

J'ai un div avec un background-image. Je veux superposer l'image d'arrière-plan avec une couleur rgba (rgba(0,0,0,0.1)) lorsque l'utilisateur survole la div.

Je me demandais s’il existait une solution à une division (c’est-à-dire pas avec plusieurs divs, une pour l’image et une pour la couleur, etc.). 

J'ai essayé plusieurs choses:

<div class="the-div" id="test-1"></div>
<div class="the-div" id="test-2"></div>
<div class="the-div" id="test-3"></div>

Et ce CSS:

.the-div {
    background-image: url('the-image');
    margin: 10px;
    width: 200px;
    height: 80px;
}

#test-1:hover {
    background-color: rgba(0,0,0,0.1);
}

#test-2:hover {
    background: url('the-image'), rgba(0,0,0,0.1);
}

#test-3:hover {
    background: rgba(0,0,0,0.1);
}

Voir ce violon .

La seule option que j'ai vue est de créer une autre image, avec superposition, de la précharger en utilisant JavaScript puis d'utiliser .the-div:hover { background: url('the-new-image'); }. Toutefois, je souhaiterais une solution exclusivement CSS (plus facile, moins de requêtes HTTP, moins de disques durs). Y a-t-il?

csscss3backgroundbackground-imagergba
47
Keelan

La solution de PeterVR a pour inconvénient que la couleur supplémentaire s’affiche au-dessus de l’ensemble du bloc HTML, ce qui signifie qu’elle apparaît également au-dessus du contenu div, et pas seulement au-dessus de l’arrière-plan. Cela convient si votre div est vide, mais si elle n'utilise pas de dégradé linéaire, cela pourrait être une meilleure solution:

<div class="the-div">Red text</div>

<style type="text/css">
  .the-div
  {
    background-image: url("the-image.png");
    color: #f00;
    margin: 10px;
    width: 200px;
    height: 80px;
  }
  .the-div:hover
  {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.1))), url("the-image.png");
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
  }
</style>

Voir violon . Dommage que les spécifications de dégradé soient actuellement un désordre. Voir tableau de compatibilité , le code ci-dessus devrait fonctionner dans tout navigateur disposant d'une part de marché importante - à l'exception de MSIE 9.0 et des versions antérieures.

Edit (mars 2017): L'état du Web est maintenant beaucoup moins compliqué. Ainsi, les lignes linear-gradient (prises en charge par Firefox et Internet Explorer) et -webkit-linear-gradient (prises en charge par Chrome, Opera et Safari) sont suffisantes; des versions avec préfixe supplémentaires ne sont plus nécessaires.

46
Wladimir Palant

Oui, il existe un moyen de le faire. Vous pouvez utiliser un pseudo-élément after pour positionner un bloc au-dessus de votre image d'arrière-plan. Quelque chose comme ceci: http://jsfiddle.net/Pevara/N2U6B/

Le css pour le :after ressemble à ceci:

#the-div:hover:after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
}

modifier:
Lorsque vous souhaitez appliquer cela à un élément non vide et que vous superposez simplement l'arrière-plan, vous pouvez le faire en appliquant un z-index positif à l'élément et un négatif au :after. Quelque chose comme ça:

#the-div {
    ...
    z-index: 1;
}
#the-div:hover:after {
    ...
    z-index: -1;
}

Et le violon mis à jour: http://jsfiddle.net/N2U6B/255/

34
Pevara

/* Working method */
.tinted-image {
  background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(https://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg);
    height: 1280px;
    width: 960px;
    background-size: cover;
}

.tinted-image p {
    color: #fff;
    padding: 100px;
  }
<div class="tinted-image">
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam distinctio, temporibus tempora a eveniet quas  qui veritatis sunt perferendis harum!</p>
  
</div>

source: https://css-tricks.com/tinted-images-multiple-backgrounds/

5
pgrono

Idéalement, la propriété background nous permettrait de superposer différents arrière-plans similaires à la superposition d’image d’arrière-plan détaillée à l’emplacement http://www.css3.info/preview/multiple-backgrounds/ . Malheureusement, du moins dans Chrome (40.0.2214.115), l'ajout d'un arrière-plan rgba à côté d'un arrière-plan d'image url () semble casser la propriété.

La solution que j'ai trouvée consiste à rendre la couche rgba sous forme d'image codée 1px * 1px Base64 et de la lier.

.the-div:hover {
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgkAQAABwAGkn5GOoAAAAASUVORK5CYII=), url("the-image.png");
}

pour les images 1 * 1 pixels encodées en base64/ http://px64.net/

Voici votre jsfiddle avec ces modifications apportées. http://jsfiddle.net/325Ft/49/ (J'ai également remplacé l'image par une image existante sur Internet)

3
RedEight

J'ai le travail suivant:

html {
  background:
      linear-gradient(rgba(0,184,255,0.45),rgba(0,184,255,0.45)),
      url('bgimage.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Ce qui précède produira une superposition bleue opaque de Nice. 

0
guero64