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);
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.
Es gibt eine überraschende Anzahl von Anwendungen für die Box-Shadow-Funktion.
quelle
box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .2)
.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
quelle
background-size:cover;
undbackground-position:center center;
setzte auf dieses Element. Dies scheint diesen Effekt aufzuheben.Sie können auch einen linearen Farbverlauf und ein Bild verwenden: http://codepen.io/anon/pen/RPweox
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
quelle
Sie benötigen dann ein Wrapping-Element mit dem BG-Bild und darin das Inhaltselement mit der BG-Farbe:
und die CSS:
quelle
Versuche dies. Funktioniert bei mir.
quelle
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
SASS
CSS
Ich hoffe es hilft
quelle
div
mindestens eine Position hat: relativeIn meiner Antwort unter https://stackoverflow.com/a/18471979/193494 finden Sie einen umfassenden Überblick über mögliche Lösungen:
quelle
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:
HTML:
Das sind die Grundlagen. Es folgt ein Anwendungsbeispiel, in dem ich von
background
zu gewechselt habe ,background-image
aber beide Eigenschaften funktionieren gleich.BITTE WARTE EINE MINUTE! Es dauert einige Zeit, um die externen Muster zu laden.
Diese Website scheint ziemlich langsam zu sein ...
quelle
:hover
überlagert?Sie können ein halbtransparentes Pixel verwenden, das Sie beispielsweise hier auch in base64 erzeugen können. Hier ein Beispiel mit 50% Weiß:
ohne hochladen
ohne extra html
Ich denke, das Laden sollte schneller sein als Box-Shadow oder linearer Farbverlauf
quelle
Hier ist ein einfacher Trick mit nur CSS.
quelle
Eine andere mit einer SVG als Inline-Overlay-Bild (Hinweis: Wenn Sie
#
innerhalb des SVG -Codes verwenden, müssen Sie das urlencode!):quelle
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:
HTML
CSS
quelle
Sie können Ihrer Überlagerungsfarbe auch Deckkraft hinzufügen.
Anstatt zu tun
Du kannst tun:
Erstellen Sie dann einen neuen Stil für die Deckkraftfarbe:
Ä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.
quelle