Semi-transparente Farbschicht über Hintergrundbild?

Ich habe ein DIV und ich möchte ein Muster als Hintergrund setzen. Dieses Muster ist grau. Um es ein bisschen schöner zu machen, möchte ich eine helle, transparente Farbschicht auftragen. Unten ist, was ich versucht habe, aber das hat nicht funktioniert. Gibt es eine Möglichkeit, die farbige Ebene über das Hintergrundbild zu legen? Vielen Dank im Voraus für Ihre Antworten. Prost. Marc.

Hier ist mein CSS:

background: url('../img/bg/diagonalnoise.png'); background-color: rgba(248, 247, 216, 0.7); 

Hier ist es:

 .background { background:url('../img/bg/diagonalnoise.png'); position: relative; } .layer { background-color: rgba(248, 247, 216, 0.7); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 

HTML dafür:

 

Natürlich müssen Sie der class .background eine Breite und Höhe .background , wenn keine anderen Elemente darin enthalten sind

Ich weiß, dass dies ein wirklich alter Thread ist, aber er taucht oben in Google auf. Hier ist eine weitere Option.

Dieser ist reines CSS und benötigt kein zusätzliches HTML.

 box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2); 

Es gibt eine überraschende Anzahl von Verwendungen für die Box-Schatten-function.

Von CSS-Tricks … gibt es einen Schritt, dies ohne Z-Indizierung und Hinzufügen von Pseudoelementen zu tun – erfordert einen linearen Gradienten, was meiner Meinung nach bedeutet, dass Sie CSS3-Unterstützung benötigen

 .tinted-image { background: /* top, transparent red */ linear-gradient( rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45) ), /* your image */ url(image.jpg); } 

Sie können auch einen linearen Farbverlauf und ein Bild verwenden: http://codepen.io/anon/pen/RPweox

 .background{ background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url('http://www.imageurl.com'); } 

Dies liegt daran, dass die lineare Farbverlaufsfunktion ein Bild erstellt, das zum Hintergrundstapel hinzugefügt wird. https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Sie benötigen dann ein Umbruchelement mit dem BG-Bild und darin das Inhaltselement mit der BG-Farbe:

 

und das CSS:

 #Wrapper{ background:url(../img/bg/diagonalnoise.png); width:300px; height:300px; } #Content{ background-color:rgba(248,247,216,0.7); width:100%; height:100%; } 

Versuche dies. functioniert bei mir.

 .background { background-image: url(images/images.jpg); display: block; position: relative; } .background::after { content: ""; background: rgba(45, 88, 35, 0.7); position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .background > * { z-index: 10; } 

Ich nutze dies, um sowohl Farbschattierungen als auch Farbverläufe auf Bilder anzuwenden, damit dynamischer überlagernder Text leichter lesbar wird, wenn Sie die Bildfarbprofile nicht steuern können. Sie müssen sich keine Gedanken über den Z-Index machen.

HTML

 

SASS

 .background-image { background: url('../img/bg/diagonalnoise.png') repeat; &:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(248, 247, 216, 0.7); } } 

CSS

 .background-image { background: url('../img/bg/diagonalnoise.png') repeat; } .background-image:before { content: ''; position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: rgba(248, 247, 216, 0.7); } 

Ich hoffe es hilft

Meine Antwort finden Sie unter https://stackoverflow.com/a/18471979/193494 für einen umfassenden Überblick über mögliche Lösungen:

  1. Verwenden mehrerer Hintergründe mit einem linearen Gradienten,
  2. mehrere Hintergründe mit einem generierten PNG, oder
  3. styling an: nach Pseudoelement, um als sekundäre Hintergrundschicht zu fungieren.

Warum so kompliziert? Ihre Lösung war fast richtig, außer dass es einfacher ist , das Muster transparent und die Hintergrundfarbe stabil zu machen . PNG kann Folien enthalten. Verwenden Sie Photoshop, um das Muster transparent zu machen, indem Sie die Ebene auf 70% setzen und das Bild erneut speichern. Dann brauchen Sie nur einen Selektor. Arbeiten über den Browser.

CSS:

 .background { background: url('../img/bg/diagonalnoise.png');/* transparent png image*/ background-color: rgb(248, 247, 216); } 

HTML:

 
...

Sie können ein halbtransparentes Pixel verwenden, das Sie zB hier auch in base64 erzeugen können. Hier ein Beispiel mit weiß 50%:

 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=), url(../img/leftpanel/intro1.png); background-size: cover, cover; 
  • ohne hochzuladen

  • ohne extra html

  • Ich denke, das Laden sollte schneller als Box-Schatten oder linearer Gradient sein