Halbtransparente Farbschicht über Hintergrundbild?

213

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);
Marc
quelle

Antworten:

217

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

Johannes Klauß
quelle
10
Es gibt absolut keinen Grund für eine relative und absolute Positionierung.
Sven Bieder
2
Ah ja, natürlich war ich ein bisschen im modalen Popup, weiß nicht warum. Ihre Antwort ist natürlich sauberer und einfacher.
Johannes Klauß
@ JohannesKlauß wie kommt es, dass seine Antwort sauberer und einfacher ist? es funktioniert nicht, zumindest für meinen Fall.
Danny22
2
Ich finde das sauberer. Der Box-Schatten hat Probleme, wenn der Inhalt nicht länger als bg usw. ist
Jack
1
Perfekte Lösung!
Roy Shoa
299

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.

BevansDesign
quelle
3
Sehr schön! Ist dies eine gute Idee in Bezug auf die Leistung? Ich habe mich nicht mit der Leistung von Box-Shadow befasst
Miguel Stevens
18
Netter Hack, aber ein großer Performance-Killer. Dies verlangsamt jedes mobile Gerät. Box Shadow verursacht Leistungsprobleme auf Mobilgeräten. Es ist besser, es zu vermeiden, besonders wenn es einen anderen Weg gibt.
Hexodus
4
Sie sind ein Genie, Sir!
Mika
7
Nur ein Update ein paar Jahre später: Ich verwende diese Methode derzeit auf kotulas.com und es gibt keine signifikante Verlangsamung, die ich bemerkt habe. Es könnte zu einem Problem werden, wenn Sie es für Hunderte von Elementen verwenden, aber selbst auf einer Seite mit mehr als 150 Bildern ist es für mich kein Problem. (Und das ist auf einem Arbeitscomputer.) Natürlich sollten Sie es vorab testen, um sicherzustellen, dass es für Sie richtig ist. Und was die alte Browserkompatibilität betrifft, da der Fallback darin besteht, dass der Benutzer keinen Hover-Over-Effekt sieht (ohne andere Probleme), bin ich damit einverstanden.
BevansDesign
8
Ich persönlich benutze es so : box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .2).
Neurotransmitter
135

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);
}
Tom
quelle
Dies hat großartig funktioniert. Sie können keine Farbverläufe animieren. Wenn Sie jedoch eine Farbe pulsieren möchten, denken Sie nicht, dass dies mit einer Methode möglich ist.
sricks
1
Ich hatte background-size:cover;und background-position:center center;setzte auf dieses Element. Dies scheint diesen Effekt aufzuheben.
Trost
Funktioniert hervorragend mit einer Hintergrundgröße: Cover; nach dem. Zumindest auf Chrom.
Davidbonachera
Auf jeden Fall der bequemste Weg, um Hintergrundmuster und Bilder zu tönen, aber achten Sie darauf, dies mit Chrome und anderen zu überprüfen, insbesondere wenn es auf das Body-Tag angewendet wird, wird Chrome mit einer Tonne Verzögerung gescrollt. FF geht gut damit um.
Hastig Zusammenstellen
4
Bin ich der einzige, der alt genug ist, um die Tom-Referenz zu erhalten?
Abram
46

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

TorranceScott
quelle
Netter Hack zum Hinzufügen zur Toolbox!
Adam Yost
26

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%;
}
Sven Bieder
quelle
25

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;
}
Yaufaniadam
quelle
2
Dies ist eine wirklich gute Antwort, für die keine zusätzlichen HTML-Elemente erforderlich sind. Vielen Dank!
Patr1ck
16

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

d4ncer
quelle
Dies funktioniert, aber Sie müssen das zweite "left: 0;" zu "unten: 0;"
Matthew Hudson
1
Dies sollte die akzeptierte Antwort sein, da unnötige Elemente vermieden werden. Stellen Sie einfach sicher, dass Ihr .background-Bild divmindestens eine Position hat: relative
mjsarfatti
6

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.
Kevin C.
quelle
4
Bitte poste keine Links als Antworten. Geben Sie hier den entsprechenden Code ein, aber verlinken Sie zusätzlich zu der Quelle, aus der Sie ihn kopiert haben.
Blazemonger
4

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

Hexodus
quelle
Können Sie zum Beispiel Hintergrundfarbe anwenden, die das Hintergrundbild :hoverüberlagert?
Sir
Es würde länger dauern, Photoshop zu starten und dies zu tun, anstatt ein paar Codezeilen hinzuzufügen.
Nihiser
Ich habe dies versucht, aber festgestellt, dass das transparente PNG eine ziemlich große Dateigröße (~ 500 KB) hat, was ein Nachteil dieses Ansatzes sein kann
madz
@madz Ich sprach davon, ein Muster zu erstellen - was nicht zu einer großen Datei führen sollte. Ich habe ein Beispiel mit einem 110x110px-Bild hinzugefügt, das nur 5 KB groß ist. Wenn Sie wirklich ein größeres Bild benötigen , verwenden Sie tinypng.com , um es zu komprimieren.
Hexodus
2

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

Fanky
quelle
2

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>

Zortext
quelle
1

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;
lsblsb
quelle
0

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%);
}
Mimina
quelle
0

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.

Vaibhav Herugu
quelle