Es gibt keine `background-opacity`-Eigenschaft in CSS, aber Sie können sie vortäuschen, indem Sie ein Pseudo-Element mit normaler Deckkraft einfügen, das genau die gleiche Größe wie das Element dahinter hat.
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Warum nicht
statt fester Breite und Höhe verwenden?
Oder solange die Position absolut ist :), verwenden Sie einfach
Was ist, wenn es nicht vollständig transparent sein soll ... wie kann/macht man das?
Sie benötigen eine festgelegte Höhe für das Div, in diesem Fall hat 100% keinen Bezug, da das Div kein übergeordnetes Element hat. Die festgelegte Höhe und Breite repräsentieren die Komponente, der Sie einen Hintergrund geben.
Das wurde für das `:after` verwendet.
Wie ist die Browserunterstützung für diesen Snippet?
Bekannte Unterstützung: Firefox 3.5+, Opera 10+, Safari 4+, Chrome 4+, IE 9+
Yeah!
Ich benutze
filter: alpha(Opacity=90);
opacity: 0.9;
Ja, aber es macht alles opak, nicht nur den Hintergrund.
Was ist dann Ihr Ergebnis?
@jumplink: Das stimmt nicht. Ich benutze derzeit `filter: alpha(Opacity=30); opacity: 0.3;` auf meiner aktiven Website ohne Probleme.
@jumplink, das ist nur, wenn er es auf das übergeordnete Element anwendet, das schlägt er nicht vor. :P
Ich würde `opacity` gegenüber `filter` aus Sicht der Browserunterstützung bevorzugen. Bei richtiger Unterstützung sehe ich keinen Unterschied. Gibt es einen Unterschied in der Leistung?
Dies ist ein 100% legitimer CSS-Trick, um nur die Transparenz des Hintergrundbildes oder der Hintergrundfarbe (in diesem Fall) zu ändern
/* Ich nehme hier Hellgrau für den Hintergrund */
background-color: rgba(211, 211, 211, 0.3);
Ich hoffe, das hat geholfen!
@Black Panther
Wie funktioniert das für Hintergrundbilder?
Schön!
Danke für deinen Trick und für diesen Stern hier in der Kommentarbox :D.
Gibt es einen Hack, damit das mit IE 7 und 8 funktioniert?
Browser aktualisieren ;)
Mars
Permalink zum Kommentar# 17. AUGUST 2012
Ich benutze
filter: alpha(Opacity=90);
filter: alpha(opacity=40); /* Für IE8 und früher */
Das funktioniert gut, aber ich kann den Text im ‚oberen‘ Div nicht auswählen/anklicken. Hat jemand eine Lösung dafür gefunden?
Sie können wahrscheinlich nicht klicken, weil Sie mehr als ein Div darin haben. Die Lösung ist, Klassen mit Ihrem Div zu verwenden; siehe Code unten
}
div.transparentBox::after {
content: “”;
background-color: #ffffff;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Sie können es auch mit so etwas schummeln
Wie ändert man die Transparenz nur des Hintergrundbildes? Der Versuch hat alles geändert, außer dem Hintergrundbild, das seine Transparenz geändert hat...
nette Tricks, das hat mir geholfen :)
Mutter Gottes. Das ist perfekt. Ich konnte keine Möglichkeit finden, einen Hintergrund mit Transparenz anzuwenden (der perfekt in sein übergeordnetes Element passen würde und nicht über den Inhalt hinausragt) und dachte, ich müsste ein Präsentations-Div hinzufügen. Dies ist einer der großartigsten Tricks, die ich dieses Jahr gesehen habe. Dank Ihnen kann ich von meiner zukünftigen Website mehr visuelles erwarten. Wirklich, danke, danke, danke, vielen Dank.
„Größte“ Tricks? ;-)
Dies sind die CSS-Codes, um den Hintergrund des Bildes transparent zu machen!
PROBIEREN SIE ES…! :)
background: rgb(255, 255, 255) transparent ;
background: rgba(255, 255, 255, 0.8) ;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF) ;
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)” ;
*Nur von IE unterstützt
Warum Code für die Transparenz von Hintergrundbildern verwenden?
Der einfachste Weg ist, Ihre .PNG bereits mit der richtigen Transparenz zu exportieren. So müssen Sie keine Deckkraft codieren. Und es wird von allen Browsern unterstützt, einschließlich IE6 (bei Verwendung von PNG-Fix).
Wie ändert man die Transparenz bei Mouseover? Ohne ein neues Bild zu laden oder eine Sprite zu verwenden.
Oder,
Wie stelle ich die Transparenz auf einen beliebigen Prozentsatz im Frontend ein?
Der Hauptgrund, so stelle ich mir vor, wäre die Einsparung von Downloadzeit. Insbesondere halbtransparente PNGs sind ziemlich groß. Ich betrachte ein 10 KB JPG gegenüber einem 100 KB PNG.
Ich werde es verwenden, um Text lesbarer zu machen, wenn sich sein Layout bei einem responsiven Breakpoint ändert und er über das Hintergrundbild ragt.
Wenn ich diesen Trick für das übergeordnete `body`-Element anwende (damit ich eine transparente Farbe als Überlagerung des Hintergrunds erhalte), wird das `:after`-Element nur im anfänglichen Viewport-Bereich angezeigt. Wenn ich nach unten scrolle, verschwindet es. Irgendwelche Ideen dazu?
JSFiddle hier, das das Problem illustriert
http://jsfiddle.net/ccnokes/sqnKb/
Toller Trick, aber.
Cameron, Sie können Ihre Position von „absolut“ auf „fest“ setzen. Das sollte Ihr Problem beheben.
JSFiddle hier zur Fehlerbehebung
http://jsfiddle.net/sqnKb/20/
Lösungen für Camerons Dilemma
Cantidio Fontes‘ Lösung funktioniert gut.
Im Einklang mit den Anweisungen dieses Artikels
display: block und position wurden vom übergeordneten Element weggelassen, das Hinzufügen funktioniert auch wie erwartet.
Hallo, wie kann ich die Transparenz des Hintergrundbildes innerhalb des Textfeldes reduzieren? Ich habe ein Benutzername-Textfeld innerhalb eines Benutzerlogos und möchte dessen Transparenz reduzieren, ohne das Textfeld zu beeinträchtigen. Vielen Dank im Voraus.
Hallo,
Wie kann ich das Hintergrundbild transparent machen, außer mit `background: transparent` oder `background: none`?
Probieren Sie das mit unterschiedlichen Opazitätswerten aus, um dies zu sehen.
div.background
{
background:url(tree.gif);
background-size:100% 100%;
background-color:#ffffff;
opacity:.8;
background-repeat:no-repeat;
}
div.box
{
background:url(flwr.gif);
background-size:100% 100%;
background-color:#ffffff;
opacity:0.7;
background-repeat:no-repeat;
}
}
Dies ist ein Text, der in der transparenten Box platziert ist.
Dies ist ein Text, der in der transparenten Box platziert ist.
Dies ist ein Text, der in der transparenten Box platziert ist.
Dies ist ein Text, der in der transparenten Box platziert ist.
Dies ist ein Text, der in der transparenten Box platziert ist.
Dies ist ein Text, der in der transparenten Box platziert ist.
Dies ist ein Text, der in der transparenten Box platziert ist.
Dies ist ein Text, der in der transparenten Box platziert ist.
Dies ist ein Text, der in der transparenten Box platziert ist.
Dies ist ein Text, der in der transparenten Box platziert ist.
Dies ist ein Text, der in der transparenten Box platziert ist.
Dies ist ein Text, der in der transparenten Box platziert ist.
Dies ist ein Text, der in der transparenten Box platziert ist.
Dies ist ein Text, der in der transparenten Box platziert ist.
Dies ist ein Text, der in der transparenten Box platziert ist.
Dies ist ein Text, der in der transparenten Box platziert ist.
Dies ist ein Text, der in der transparenten Box platziert ist.
Dies ist ein Text, der in der transparenten Box platziert ist.
Dies ist ein Text, der in der transparenten Box platziert ist.
div.background
{
background:url(img_tree.gif);
background-size:100% 100%;
background-color:#ffffff;
opacity:.8;
background-repeat:no-repeat;
}
div.box
{
background:url(img_flwr.gif);
background-size:100% 100%;
background-color:#ffffff;
opacity:0.7;
background-repeat:no-repeat;
}
}
Dies ist ein Text, der in der transparenten Box platziert ist.
Dies ist ein Text, der in der transparenten Box platziert ist.
Dies ist ein Text, der in der transparenten Box platziert ist.
Dies ist ein Text, der in der transparenten Box platziert ist.
Dies ist ein Text, der in der transparenten Box platziert ist.
Anstatt ein tatsächliches Bild zu verwenden, verwenden Sie `rgba(255, 255, 255, 0.5)` – kombiniert mit einer Technik von meinem Kollegen. Funktioniert einwandfrei.
Ich musste den z-index von -1 auf 1 ändern, damit die Shader-Schicht angezeigt wird. (Photoshop & GIMP-Mentalität)
Die Seite ist dunkel mit einem Div-Hintergrundbild und einer Farbe, die weiß sind...
Ich wollte keine kontrastierende Farbe, um die tatsächliche Bildgröße anzuzeigen, und das gesamte Div war viel zu hell!
Ein kleiner Farbton darüber reduzierte die Blendung und machte alles wieder schön lesbar!
Vielen Dank dafür; ich habe mir den Kopf zerbrochen, wie ich den Inhalt nicht zu stark herausfallen lassen kann.
Entschuldigung für die Länge, hier ist mein Beispiel, falls andere Probleme mit der Stapelreihenfolge haben
Ausgezeichnet! Genau das, was ich brauchte. Danke!
Ich weiß, dass es eine alte Frage ist, aber für alle anderen, die vielleicht die Antwort auf ivan.pvd's Frage wissen möchten
Fügen Sie einfach **`:hover`** für Mausover-Änderungen der Transparenz oder beliebige Stile hinzu; Farbe, Schatten, Hintergründe usw...
Danke für diesen hilfreichen Trick :)
Ich auch, danke.
Kindlicher Versuch, etwas Nützliches zu schaffen, das sich aber als nutzlos erweist.
Oh oh, „Nutsack“ findet dich kindisch!
Ich musste die Hintergrundbilder clientseitig dynamisch generieren und wollte daher eine Klasse per jQuery anwenden, damit sie transparent aussehen, ohne die Implementierung zu verkomplizieren. Also habe ich einen innenliegenden `box-shadow` verwendet, um denselben Effekt zu erzielen (hat sogar einen schönen Vignett-Look, kann aber flach transparent sein, wenn man den `spread` genug anpasst).
Wie wäre es mit Archiv-Post-Thumbnails, die unterschiedliche Breiten haben?
Wie kann man sicherstellen, dass eine Hintergrundfarbe mit Transparenz immer die volle Breite des Bildes und nicht des Eintrags-Titels oder Headers hat, wenn man die Titel über dem Bild anzeigen lassen möchte?
Das habe ich, aber es kontrolliert nicht die Breite der Hintergrundfarbe bei unterschiedlich großen Post-Thumbnails
.archive .entry-header .entry-title { background: rgba(55, 85, 25, 0.3); position: absolute; display: block; text-align: center; font-size: 20px; padding: 20px 10px; }Ernsthaft? 100 KB PNG ist das, was Sie als „schwer“ bezeichnen? Vielleicht im Vergleich zu einem 10 KB JPG, aber wirklich, solange Sie nicht eine Million davon auf einer Seite herunterladen, haben wir heutzutage ziemlich schnelles Internet. Solange Sie nicht in den Megabyte-Bereich kommen, würde ich mir keine Sorgen um Bilder von 10 KB vs. 100 KB machen. Wenn Sie sich so viele Sorgen um die Dateigröße machen, verwenden Sie Farben anstelle von Bildern. Es klingt für mich einfach etwas kleinlich, aber was auch immer.
Some guy, dieser Kommentar riecht nach absoluter Amateurhaftigkeit. Keine Sorge um fucking 90 Kbps? Das ist absolut riesig für ein Bild der Größe, über die wir sprechen. Nehmen Sie es und multiplizieren Sie es mit Hunderten von potenziellen Bildern auf der gesamten Website, und multiplizieren Sie das mit der gesamten Bandbreite, die Sie in den Müll werfen, wenn Sie eine echte Zuschauerschaft haben. Es gibt immer noch ein paar Leute mit 56k und eine Menge Leute mit EDGE- oder 3G-Verbindungen. Nur weil Sie jederzeit schnelles Internet haben, heißt das nicht, dass jeder andere auch eins hat, und es bedeutet auch nicht, dass Ihr Bandbreite kostenlos ist. Entwickler wie Sie ekeln mich an. Sie kümmern sich nicht um das Benutzererlebnis, Sie sollten sich einen anderen Bereich suchen.
Leute, vielen Dank für dieses sehr nützliche Stück Code. Ich habe es verbessert und wollte etwas zurückgeben.
Ich habe eine Situation, in der ich mit dynamischer „Höhe“ / „Breite“ des ursprünglichen Div zu tun habe, daher kann ich keine Höhe / Breite des `:after`-Selektors festlegen (außer mit JS, aber das ist zu viel Arbeit für Faule wie mich).
Also habe ich ein wenig herumgespielt und eine reine CSS-Lösung gefunden, die sich nicht um Höhe / Breite / Polsterung oder Ränder kümmert.
Ich hoffe, ich habe geholfen :)
http://jsfiddle.net/4CvZv/
Nun, ich bin neu in CSS. Ich wäre wirklich dankbar, wenn Sie meine Fragen beantworten könnten.
Ich habe Schwierigkeiten, die verschiedenen Werte von „display“ und „position“ zu verstehen.
Welchen Unterschied macht jeder Wert und wann sollte man welchen verwenden?
Vielen Dank im Voraus
Wie verwende ich es beim Hochladen eines Logos in meinen WordPress-Blog?
Ausgezeichnet, Bro. Gutes Beispiel für die Transparenz von Hintergrundbildern...
Danke
Hallo Leute, ich versuche, das auf meiner Website für mein Hintergrundbild zum Laufen zu bringen, hier ist mein Code
.container::after {
Das Problem ist, dass mein Hintergrundbild nicht angezeigt wird, wenn ich es in die URL einfüge. Es wird einfach mit dem stilisierten grauen Gradienten-Hintergrund angezeigt. Aber ich möchte, dass es aussieht, als hätte mein Bild Transparenz. Funktioniert das oder sollte ich einfach Photoshop verwenden?
Alle, die versucht sind, den `filter` für IE8-Kompatibilität zu verwenden – denken Sie daran:
Wenn Sie dies tun, verwenden Sie ein separates IE7-8 CSS-Include und legen Sie es dort hinein, da Filter einen riesigen
Speicherbedarf für eine Website haben und bei IE9+ nicht benötigt werden.
Oder... da sie etwa 3 % des Internets ausmachen... ignorieren Sie die Leute, die sich weigern, ihren Browser zu aktualisieren, damit Sie nicht den Rest der IE-Benutzer verlangsamen.
Ich hatte einige Probleme bei der Implementierung dieses Tricks (Hintergründe wurden nicht angezeigt), es stellte sich heraus, dass es mit z-index zu tun hatte, das Div war vor dem Container, aber das `::after` wurde dahinter platziert.
Die Erhöhung des z-index des Divs hat das behoben.
Danke fürs Posten, Sam. Das ist ein großartiger Trick und hat gut funktioniert, bis ich die Transparenz eines übergeordneten Elements entfernt habe, wodurch der `:after`-Hintergrund verschwand. Das Ändern des `:after` z-index hat es nicht behoben, aber das Hinzufügen von `z-index:0` zum Div selbst hat es behoben.
Funktioniert gut...
Hat wie ein Zauber funktioniert! Musste das Rad nicht neu erfinden! :-) Danke
FUNKTIONIERT PERFEKT! Danke!
Warum das `::after`-Pseudo-Element verwenden und es mit `z-index` wieder nach unten verschieben, anstatt das `::before`-Pseudo-Element zu verwenden?
Je weniger wir mit `z-index` machen, desto besser.
Das ist wirklich großartig! Funktioniert genau wie erwartet und macht die Hintergrundänderung zum Kinderspiel.
Der `z-index`-Teil ist tatsächlich ziemlich wichtig. Ohne die Angabe des `z-index` kann das überlagernde Objekt andere Dinge transparent machen. In meinem Fall habe ich einen Hintergrund von 100% Breite/Höhe erstellt, ohne `z-index` macht es die gesamte Website durch das Pseudo-Element transparent.
Kann mir jemand etwas über `end()` in jQuery erklären?
NICE!
Ich möchte mein Hintergrundbild transparent machen, ohne `position: relative, absolute, fixed` usw. zu verwenden. Wenn ich `opacity` von 0 bis 1 einstelle, werden meine Vordergrundinhalte transparent. Ich möchte nur die Transparenz des Hintergrundbildes.
Hallo @parmod und alle anderen
Dies ist ein einfacher CSS-Trick, um Ihr Hintergrundbild abzudunkeln, ohne andere CSS-Sachen.
Fügen Sie in Ihrem Element mit dem Hintergrundbild eine Hintergrundfarbe und `background-blend-mode` wie folgt hinzu:
.elementWithBackground {
background-image: url(image/source);
background-color: rgba(0,0,0,.4);
background-blend-mode: darken;
}
In der Transparenz von `background-color` entscheiden Sie, wie viel Transparenz Sie für Ihre Hintergrundfarbe wünschen.
Prost!
Hallo zusammen!
Dies ist ein einfacher CSS-Trick, um Ihr Hintergrundbild abzudunkeln, ohne andere CSS-Sachen.
Fügen Sie in Ihrem Element mit dem Hintergrundbild eine Hintergrundfarbe und `background-blend-mode` wie folgt hinzu:
.elementWithBackground {
background-image: url(image/source);
background-color: rgba(0,0,0,.4);
background-blend-mode: darken;
}
In der Transparenz von `background-color` entscheiden Sie, wie viel Transparenz Sie für Ihre Hintergrundfarbe wünschen.
Blend-Modus wird von den meisten Browsern gut unterstützt, außer Explorer
http://caniuse.com/#search=background-blend-mode
Prost!
Ich habe eine rechteckige Box über einem Bild mit Text und Button. Ich möchte, dass alles responsiv ist. Ich habe die `img-responsive`-Klasse von Bootstrap verwendet. Das Bild wird responsiv, aber die Box darüber und der Text und Button sollten genauso responsiv sein wie die Bildhöhe und -breite abnehmen. Ich konnte das mit Media Queries erreichen, aber ich muss mehr als 10 bis 15 Media Queries für jede Auflösung schreiben, um die Boxhöhe, Schrift und den Button zu verwalten, wenn Bildhöhe und -breite abnehmen.
https://plnkr.co/edit/NYocGF7vsrx8Vnr3IzSI?p=preview
Warum nicht einfach eine .png-Datei mit integrierter Transparenz verwenden? Ich nehme an, der einzige Nachteil ist, dass die Dateigröße etwas größer wäre im Vergleich zu einer .jpg, aber die Einfachheit scheint besser als ein CSS-Hack? ...nur meine Meinung.
Mit einem `rgba`-Farbverlauf können Sie alles transparent machen, was Sie möchten, einschließlich des Hintergrundbildes des `body`.
body{
background-image:linear-gradient(rgba(250, 250 ,250, .5), rgba(250, 250 ,250, .5)),url(”);
}
Alle sollten einfach diesen Kommentar lesen ^^
Es funktioniert wunderschön !!! Danke !!!
Ich möchte eine großartige Ressource für kostenlose CSS-Texturen und -Muster empfehlen: https://www.csstextures.com
Wie kann ich diesen Effekt in CSS erzielen (Bild mit weißem Hintergrund transparent)?
https://www.photoshopsupply.com/actions/remove-white-background-photoshop
Hallo Joana! Das erfordert die Bearbeitung des Fotos in Photoshop (oder einem anderen Editor) und kann je nach Detailgrad des Bildes eine mühsame Aufgabe sein. Was du dort verlinkst, ist eine Photoshop-Aktion, die versucht, diese Aufgabe zu erleichtern.
Sobald du ein Bild mit einem entfernten weißen Hintergrund hast, speichere es als Bilddatei, die Transparenz unterstützt (.png), und verwende es dann als Hintergrundbild in deinem CSS. Leider kann CSS den weißen Hintergrund nicht für dich entfernen.
Über: „Es gibt keine CSS-Eigenschaft `background-opacity`, aber du kannst sie vortäuschen, indem du ein Pseudo-Element mit normaler `opacity` einfügst, das genau die Größe des darunterliegenden Elements hat“.
DAS BEISPIEL wurde für ein DIV gegeben.
Ist es dasselbe für BODY?
Ich habe es versucht, aber… kein Erfolg!!!
Danke
Absolut! Das `body`-Element unterstützt tatsächlich `::before` und `::after` wie andere Elemente, sodass dasselbe angewendet werden kann.
Hier ist ein Beispiel: https://codepen.io/geoffgraham/pen/XWWMYQP
Danke, Geoff, ich werde es sofort ausprobieren. Sehr, sehr freundlich und hilfreich
ES FUNKTIONIERT!!!!!! Danke nochmal!
Für mehr Hintergrundeffekte können Sie `filter: brightness(70%);` anstelle von `opacity` verwenden.
Hey, normalerweise verwende ich nicht `::after`, sondern ich verwende `linear-gradient`. Kennst du Nachteile bei der Verwendung von `linear-gradient` anstelle eines `::after`-Pseudo-Elements?
background-image: linear-gradient(to right bottom, rgba(255,255,255, 0.3),rgba(255,255,255, 0.3)), url(image.jpg);
Hallo, weiß jemand, wie ich das Bild das gesamte Element abdecken lassen kann?
Hallo Robert! Du kannst `background-size: cover;` für das Hintergrundbild verwenden, um das Element vollständig auszufüllen.
Ich habe das ausprobiert und es war nicht sichtbar… Ich habe herumgespielt und herausgefunden, dass die Verwendung eines negativen `z-index` (-1) das Pseudo-Element (das `before` oder `after`) hinter die Hintergrundfarbe eines Vorfahren (falls vorhanden) verschieben lässt. Dies funktioniert also nur, wenn die Hintergründe ALLER Vorfahren nicht gesetzt sind (oder auf `transparent` gesetzt sind). Wenn ich zum Beispiel irgendwo in der Hierarchie einen `div`-Hintergrund auf `#fff` gesetzt hätte, wäre das Pseudo-Element nicht sichtbar gewesen.
Ich habe es geschafft, es funktionsfähig zu machen, indem ich einen nicht-negativen `z-index` (oder ihn nicht gesetzt habe, Standard ist 0) für das Pseudo-Element gesetzt habe, was es vor allen Inhalten platziert und jegliche Interaktion verhindert. Also habe ich das durch Hinzufügen einer weiteren Regel wie `div > * { z-index: 1; }` entgegengewirkt, um alle anderen Inhalte anzuheben. Beachten Sie jedoch, dass die Regel nicht auf Textknoten funktioniert (funktioniert nur auf Elementen), daher müssen Sie rohen Text in etwas wie ein `` oder `` einpacken, damit er angehoben wird.
Also wird es so