it-swarm.com.de

Ein Hintergrundbild wird mit einer RGBA-Hintergrundfarbe überlagert

Ich habe eine div mit einem background-image. Ich möchte das Hintergrundbild mit einer rgba-Farbe (rgba(0,0,0,0.1)) überlagern, wenn der Benutzer das div aufhängt.

Ich habe mich gefragt, ob es eine Ein-Div-Lösung gibt (d. H. Nicht mit mehreren Divs, einer für das Bild und einer für die Farbe usw.). 

Ich habe mehrere Dinge ausprobiert:

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

Und dieses 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);
}

Siehe diese Geige .

Die einzige Option, die ich gesehen habe, ist, ein anderes Bild mit Überlagerung zu erstellen, es mit JavaScript vorab zu laden und dann .the-div:hover { background: url('the-new-image'); } zu verwenden. Ich möchte jedoch eine reine CSS-Lösung (übersichtlicher; weniger HTTP-Anforderungen; weniger Festplatte). Gibt es irgendwelche?

47
Keelan

Die Lösung von PeterVR hat den Nachteil, dass die zusätzliche Farbe über dem gesamten HTML-Block angezeigt wird. Dies bedeutet, dass sie auch über Div-Inhalt angezeigt wird, nicht nur über dem Hintergrundbild. Dies ist in Ordnung, wenn Ihr div leer ist. Wenn Sie jedoch keinen linearen Farbverlauf verwenden, könnte dies eine bessere Lösung sein:

<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>

Siehe Geige . Schade, dass die Gradientenspezifikationen derzeit ein Durcheinander sind. Siehe Kompatibilitätstabelle , der obige Code sollte in jedem Browser mit einem bemerkenswerten Marktanteil funktionieren - mit Ausnahme von MSIE 9.0 und älter.

Edit (März 2017): Der Zustand des Webs wurde inzwischen weit weniger chaotisch. Da die Zeilen linear-gradient (unterstützt von Firefox und Internet Explorer) und -webkit-linear-gradient (unterstützt von Chrome, Opera und Safari) ausreichen, sind keine zusätzlichen Präfix-Versionen mehr erforderlich.

46
Wladimir Palant

Ja, es gibt einen Weg, dies zu tun. Sie können ein Pseudoelement after verwenden, um einen Block auf Ihrem Hintergrundbild zu positionieren. Etwas wie dieses: http://jsfiddle.net/Pevara/N2U6B/

Die CSS für :after sieht folgendermaßen aus:

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

edit:
Wenn Sie dies auf ein nicht leeres Element anwenden möchten und nur die Überlagerung im Hintergrund erhalten möchten, können Sie dies tun, indem Sie einen positiven z-index auf das Element und einen negativen auf den :after anwenden. Etwas wie das:

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

Und die aktualisierte Geige: 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>

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

5
pgrono

Idealerweise würden wir durch die Hintergrundeigenschaft die Möglichkeit haben, verschiedene Hintergründe ähnlich der unter http://www.css3.info/preview/multiple-backgrounds/ beschriebenen Hintergrundbildebene zu schichten. Zumindest in Chrome (40.0.2214.115) scheint das Hinzufügen eines rgba-Hintergrunds neben einem url () - Bildhintergrund die Eigenschaft zu beschädigen.

Die Lösung, die ich gefunden habe, ist, die rgba-Ebene als 1px * 1px Base64-codiertes Bild zu rendern und es inline darzustellen.

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

für base64-codierte 1 * 1-Pixel-Bilder, die ich verwendet habe http://px64.net/

Hier ist Ihre jsfiddle mit diesen Änderungen. http://jsfiddle.net/325Ft/49/ (Ich habe auch das Bild gegen ein Bild ausgetauscht, das im Internet noch existiert)

3
RedEight

Ich habe folgendes zur Arbeit bekommen:

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;
}

Das oben genannte wird eine schöne, deckende blaue Überlagerung erzeugen. 

0
guero64