Halbtransparente Farbschicht über Hintergrundbild?

Ich habe einen DIV und möchte ein Muster als Hintergrund einfügen. Dieses Muster ist grau. Um es ein bisschen schöner zu machen, möchte ich eine helle transparente Farb- "Schicht" darüber legen. Unten ist, was ich versucht habe, aber was nicht funktioniert hat. Gibt es eine Möglichkeit, die farbige Ebene über das Hintergrundbild zu legen?

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:

<div class="background">
    <div class="layer">
    </div>
</div>

Natürlich müssen Sie eine Breite und Höhe für die .backgroundKlasse definieren, wenn keine anderen Elemente darin enthalten sind

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

Dies ist reines CSS und erfordert kein zusätzliches HTML.

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

Es gibt eine überraschende Anzahl von Anwendungen für die Box-Shadow-Funktion.

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

.tinted-image {
  background-image: 
    /* 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 Verlaufsfunktion ein Bild erstellt, das dem Hintergrundstapel hinzugefügt wird. https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

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

<div id="Wrapper">
  <div id="Content">
    <!-- content here -->
  </div>
</div>

und die 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. Funktioniert 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 habe dies verwendet, um sowohl Farbtöne als auch Farbverläufe auf Bilder anzuwenden, damit dynamisch überlagernder Text besser lesbar gestaltet werden kann, wenn Sie die Bildfarbprofile nicht steuern können. Sie müssen sich keine Sorgen um den Z-Index machen.

HTML

<div class="background-image"></div>

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

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

1. Verwenden mehrerer Hintergründe mit einem linearen Farbverlauf,
2. mehrere Hintergründe mit einem generierten PNG oder
3. Styling eines: nach Pseudoelements als sekundäre Hintergrundebene.

Warum so kompliziert? Ihre Lösung war fast richtig, außer dass es einfacher ist , das Muster transparent und die Hintergrundfarbe einfarbig zu machen . PNG kann Transparentfolien enthalten. Verwenden Sie also Photoshop, um das Muster transparent zu machen, indem Sie die Ebene auf 70% einstellen und Ihr Bild erneut speichern. Dann brauchen Sie nur noch einen Selektor. Funktioniert browserübergreifend.

CSS:

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

HTML:

<div class="background">
   ...
</div> 

Das sind die Grundlagen. Es folgt ein Anwendungsbeispiel, in dem ich von backgroundzu gewechselt habe , background-imageaber beide Eigenschaften funktionieren gleich.

body { margin: 0; }
div {
   height: 110px !important;
   padding: 1em;
   text-transform: uppercase;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: 600;
   color: white;
   text-shadow: 0 0 2px #333;
}
.background {
   background-image: url('https://www.transparenttextures.com/patterns/arabesque.png');/* transparent png image */
   }
.col-one {
  background-color: rgb(255, 255, 0);
}
.col-two {
  background-color: rgb(0, 255, 255);
}
.col-three {
  background-color: rgb(0, 255, 0);
}

<div class="background col-one">
 1. Background
</div> 
<div class="background col-two">
 2. Background
</div> 
<div class="background col-three">
 3. Background
</div> 

BITTE WARTE EINE MINUTE! Es dauert einige Zeit, um die externen Muster zu laden.

Diese Website scheint ziemlich langsam zu sein ...

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

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

• ohne hochladen

• ohne extra html

• Ich denke, das Laden sollte schneller sein als Box-Shadow oder linearer Farbverlauf

Hier ist ein einfacher Trick mit nur CSS.

<div class="background"> </div>
    <style>
    .background {
      position:relative;
      height:50px;
      background-color: rgba(248, 247, 216, 0.7);
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC); 
    }

    .background:after {
        content:" ";
        background-color:inherit;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; 
    }

    </style>

Eine andere mit einer SVG als Inline-Overlay-Bild (Hinweis: Wenn Sie #innerhalb des SVG -Codes verwenden, müssen Sie das urlencode!):

background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path fill="rgba(255, 255, 255, 0.4)" d="M0 0h1v1H0z"/></svg>')
                no-repeat center center/cover, 
            url('overlayed-image.jpg') no-repeat center center/cover;

Ich habe einfach verwendet background-image CSS - Eigenschaft auf dem Ziel Hintergrund div.
Beachten Sie, dass das Hintergrundbild nur Farbverlaufsfunktionen akzeptiert.
Also habe ich einen linearen Farbverlauf verwendet, bei dem zweimal dieselbe gewünschte Überlagerungsfarbe hinzugefügt wurde (verwenden Sie den letzten rgba-Wert, um die Farbopazität zu steuern).

Außerdem fanden diese beiden nützlichen Ressourcen:

1. Fügen Sie Text (oder div mit einem anderen Inhalt) über dem Hintergrundbild hinzu: Hero Image
2. Nur Hintergrundbild verwischen, ohne das Div oben zu verwischen : Unscharfes Hintergrundbild

HTML

<div class="header_div">
</div>

<div class="header_text">
  <h1>Header Text</h1>
</div>

CSS

.header_div {
  position: relative;
  text-align: cover;
  min-height: 90vh;
  margin-top: 5vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  background-image: linear-gradient(rgba(38, 32, 96, 0.2), rgba(38, 32, 96, 0.4)), url("images\\header img2.jpg");
  filter: blur(2px);
}

.header_text {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}

Sie können Ihrer Überlagerungsfarbe auch Deckkraft hinzufügen.

Anstatt zu tun

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

Du kannst tun:

background: url('../img/bg/diagonalnoise.png');

Erstellen Sie dann einen neuen Stil für die Deckkraftfarbe:

.colorStyle{
    background-color: rgba(248, 247, 216, 0.7);
    opacity: 0.8;
}

Ändern Sie die Deckkraft auf eine beliebige Zahl unter 1. Dann machen Sie diesen Farbstil auf die gleiche Größe wie Ihr Bild. Es sollte funktionieren.