Wie gebe ich Text oder Bild mit CSS einen transparenten Hintergrund?

2283

Ist es möglich, nur mit CSS das backgroundElement eines Elements halbtransparent zu machen, aber den Inhalt (Text & Bilder) des Elements undurchsichtig zu machen?

Ich möchte dies erreichen, ohne den Text und den Hintergrund als zwei separate Elemente zu haben.

Beim Versuch:

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}
<p>
  <span>Hello world</span>
</p>
Erweitern Sie das Snippet

Es sieht so aus, als ob untergeordnete Elemente der Deckkraft ihrer Eltern ausgesetzt sind, also opacity:1relativ zur opacity:0.6des Elternteils.

html  css  opacity 
— Stijn Sanders
quelle
16
Leider nicht, CSS3 zielt darauf ab, dies mit dem neuen Farbmodul zu beheben. Es würde Ihnen ermöglichen, einen Alpha-Wert anzugeben, wenn Sie eine Farbe angeben. w3.org/TR/css3-color
— meandmycode
71
Tatsächlich wird die Deckkraft der untergeordneten Elemente mit der Deckkraft des übergeordneten Elements multipliziert und nicht überschrieben. So zum Beispiel , wenn die p‚Undurchsichtigkeit s waren .6und die span‘ s Opazität war .5dann die wahre Opazität des Textes in der Spanne wäre 0.3.
— Chharvey
1
Vermutlich, aber da der Hintergrund durchscheinend ist, benötigen Sie nicht einmal den Filter / die Deckkraft: codepen.io/anon/pen/ksJug
— Stijn Sanders
5
@chharvey Was soll passieren, wenn ich opacity:.5für das übergeordnete und opacity:2für das untergeordnete Element definiere?
— Alexander
10
@ Alexander, ich bin froh, dass du diese Frage gestellt hast. Mathematisch würde man vermuten, dass das Kind zu einer Deckkraft von 1 zurückkehren würde. Allerdings opacity:2;ist CSS ungültig . Der Wert der opacityEigenschaft muss im Inklusivbereich [0,1] liegen.
— Chharvey

Antworten:

2276

Verwenden Sie entweder ein halbtransparentes PNG- Bild oder CSS 3:

background-color: rgba(255, 0, 0, 0.5);

Hier ist ein Artikel aus css3.info, Opacity, RGBA und Kompromiss (2007-06-03).

<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>
Erweitern Sie das Snippet

— Peter Mortensen
quelle
86
Ist dies mit Hex-Farben möglich? Wie #fff?
— grm
35
@grm: W3C hat überlegt, ein #RRGGBBAA-Hex-Code-Format einzuführen, aber sie haben sich (aus verschiedenen Gründen) dagegen entschieden, also können wir das nicht.
— Outis
95
@grm mit SASS Sie können,background-color: rgba(#000, .5);
— Jürgen Paul
2
Wenn Sie Transparenz verwenden möchten , unterstützt jeder Browser, der RGBA unterstützt , auch HSLA , eine weitaus intuitivere Farbzuordnung. IE8 ist der einzige pseudosignifikante Browser, der ihn nicht unterstützt. Wenn dies nicht der Fall ist, wird HSL (A) für jede Farbe verwendet.
— Iono
19
@outis: Gute Nachrichten, #RRGGBBAA ist jetzt in Farbstufe 4 .
— BoltClock
476

In Firefox 3 und Safari 3 können Sie RGBA wie von Georg Schölly erwähnt verwenden .

Ein wenig bekannter Trick ist, dass Sie ihn auch im Internet Explorer mit dem Verlaufsfilter verwenden können.

background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');

Die erste Hex-Zahl definiert den Alpha-Wert der Farbe.

Vollständige Lösung für alle Browser:

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

Dies geschieht durch CSS-Hintergrundtransparenz ohne Auswirkungen auf untergeordnete Elemente über RGBa und Filter .

Screenshots Ergebnisnachweis:

Dies ist bei Verwendung des folgenden Codes: 

 <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <title>An XHTML 1.0 Strict standard template</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css" media="all">
         .transparent-background-with-text-and-images-on-top {
             background: rgb(0, 0, 0) transparent;   /* Fallback for web browsers that doesn't support RGBa */
            background: rgba(0, 0, 0, 0.6);   /* RGBa with 0.6 opacity */
             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);  /* For IE 5.5 - 7*/
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";  /* For IE 8*/
         }
     </style>
 </head>

 <body>
     <div class="transparent-background-with-text-and-images-on-top">
         <p>Here some content (text AND images) "on top of the transparent background"</p>
        <img src="http://i.imgur.com/LnnghmF.gif">
     </div>
 </body>
 </html>

Chrome-33 IE11 IE9 IE8

— Adrien Be
quelle
1
Aber nicht in IE8. Ich habe die neue -ms-Filter-Syntax ausprobiert, aber sie hat bei mir immer noch nicht funktioniert :(
— philfreo
5
Dieser Beitrag zeigt, wie es in IE8 geht: robertnyman.com/2010/01/11/…
— Slapout
14
@philfreo: Wenn Sie das erste Bit von Sebastians Code in "Hintergrund: rgb (0, 0, 0) transparent" ändern; es sollte jetzt in IE8 funktionieren. Das nervte mich schon seit einiger Zeit!
— Tom Chantler
filter: progid Funktioniert hervorragend mit IE 9. Farbe ist: Transparenz, Rot, Grün, Blau - alle zweistelligen Hex-Werte.
— Thorsten Niehues
1
@AdrienBe - Ich habe Ihre Antwort gemäß Ihren Anweisungen bearbeitet. Leider bin ich seit einiger Zeit nicht mehr im Kopfraum dieser speziellen Fragen und Antworten, daher kann ich dieses Gespräch derzeit nicht ergänzen.
— user664833
108

Dies ist die beste Lösung, die ich finden konnte, ohne CSS 3 zu verwenden. Soweit ich sehen kann, funktioniert sie unter Firefox, Chrome und Internet Explorer hervorragend.

Stellen Sie einen Container divund zwei Kinder divauf die gleiche Ebene, eines für den Inhalt und eines für den Hintergrund. Verwenden Sie CSS, um die Größe des Hintergrunds automatisch an den Inhalt anzupassen und den Hintergrund mithilfe des Z-Index tatsächlich in den Hintergrund zu verschieben.

.container {
  position: relative;
}
.content {
  position: relative;
  color: White;
  z-index: 5;
}
.background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: Black;
  z-index: 1;
  /* These three lines are for transparency in all browsers. */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity: .5;
}
<div class="container">
  <div class="content">
    Here is the content.
    <br/>Background should grow to fit.
  </div>
  <div class="background"></div>
</div>
Erweitern Sie das Snippet

— Gorkem Pacaci
quelle
19
Er sagte: "Ohne den Text und den Hintergrund in zwei übereinander angeordneten Elementen zu trennen." Trotzdem danke, dies ist eine gute Lösung und nützlich, aber in einigen Fällen möchten Sie, dass das undurchsichtige Element ein Kind des halbtransparenten Elements ist.
— Rolf
Ich antwortete ziemlich gleich auf eine andere SO-Frage, fügte aber einen jsfiddle & Screenshot Proofs (IE7 +) hinzu, siehe hier, wenn interessiert stackoverflow.com/a/21984546/759452
— Adrien Be
@Gorkem Pacaci: Stellen Sie sicher, dass die Deckkrafteigenschaften "wirklich" browserübergreifend sind. Sie können dieses Code-Snippet von CSSTRICKS css-tricks.com/snippets/css/cross-browser-opacity verwenden
— Adrien Be
Warum nicht mit einem Pseudoelement wie :afterund vermeiden Sie das zusätzliche Markup?
— AndFisher
64

Für eine einfache halbtransparente Hintergrundfarbe sind die oben genannten Lösungen (CSS3- oder BG-Bilder) die besten Optionen. Wenn Sie jedoch etwas ausgefalleneres tun möchten (z. B. Animation, mehrere Hintergründe usw.) oder sich nicht auf CSS3 verlassen möchten, können Sie die „Fenstertechnik“ ausprobieren:

.pane, .pane > .back, .pane > .cont { display: block; }

.pane {
    position: relative;
}

.pane > .back {
    position: absolute;
    width: 100%; height: 100%;
    top: auto; bottom: auto; left: auto; right: auto;
}

.pane > .cont {
    position: relative;
    z-index: 10;
}
<p class="pane">
    <span class="back" style="background-color: green; opacity: 0.6;"></span>
    <span class="cont" style="color: white;">Hello world</span>
</p>

Bei dieser Technik werden zwei „Ebenen“ innerhalb des äußeren Fensterelements verwendet:

  • eine (die "Rückseite"), die der Größe des Fensterelements entspricht, ohne den Inhaltsfluss zu beeinträchtigen,
  • und eine (die "Fortsetzung"), die den Inhalt enthält und dabei hilft, die Größe des Bereichs zu bestimmen.

Das Ein- position: relativeFenster ist wichtig. Die hintere Ebene wird an die Größe des Fensters angepasst. (Wenn das <p>Tag absolut sein soll, ändern Sie den Bereich von a <p>in a <span>und verpacken Sie alles in ein <p>Tag mit absoluter Position .)

Der Hauptvorteil dieser Technik gegenüber den oben aufgeführten ist, dass der Bereich keine bestimmte Größe haben muss. Wie oben codiert, passt es in voller Breite (normales Blockelement-Layout) und nur so hoch wie der Inhalt. Das äußere Fensterelement kann beliebig dimensioniert werden, solange es rechteckig ist (dh der Inline-Block funktioniert; ein einfacher alter Inline-Block funktioniert nicht).

Außerdem gibt es Ihnen viel Freiheit für den Hintergrund; Sie können wirklich alles in das hintere Element einfügen und es hat keinen Einfluss auf den Inhaltsfluss (wenn Sie mehrere Unterebenen in voller Größe möchten, stellen Sie einfach sicher, dass sie auch die Position haben: absolut, Breite / Höhe: 100%, und oben / unten / links / rechts: auto).

Eine Variante, um die Anpassung des Hintergrundeinsatzes (über oben / unten / links / rechts) und / oder das Fixieren des Hintergrunds (über das Entfernen eines der Paare links / rechts oder oben / unten) zu ermöglichen, besteht darin, stattdessen das folgende CSS zu verwenden:

.pane > .back {
    position: absolute;
    width: auto; height: auto;
    top: 0px; bottom: 0px; left: 0px; right: 0px;
}

Wie geschrieben funktioniert dies in Firefox, Safari, Chrome, IE8 + und Opera, obwohl IE7 und IE6 zusätzliches CSS und Ausdrücke erfordern, IIRC, und als ich das letzte Mal nachgesehen habe, funktioniert die zweite CSS-Variante in Opera nicht.

Dinge, auf die Sie achten sollten:

  • Schwebende Elemente innerhalb der Cont-Ebene sind nicht enthalten. Sie müssen sicherstellen, dass sie gelöscht oder anderweitig enthalten sind, da sie sonst aus dem Boden rutschen.
  • Ränder werden für das Fensterelement und die Polsterung für das Element cont angezeigt. Verwenden Sie nicht das Gegenteil (Ränder im Cont oder Auffüllen im Bereich), da Sie sonst merkwürdige Dinge entdecken, z. B. dass die Seite immer etwas breiter als das Browserfenster ist.
  • Wie bereits erwähnt, muss das Ganze Block oder Inline-Block sein. Verwenden Sie <div>s anstelle von <span>s, um Ihr CSS zu vereinfachen.

Eine ausführlichere Demo, die die Flexibilität dieser Technik demonstriert, indem sie zusammen mit display: inline-blockund mit auto& spezifischen widths / min-heights verwendet wird:

.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
	position: relative;
	width: 175px; min-height: 100px;
	margin: 8px;
}

.pane > .back {
	position: absolute; z-index: 1;
	width: auto; height: auto;
	top: 8px; bottom: 8px; left: 8px; right: 8px;
}

.pane > .cont {
	position: relative; z-index: 10;
}

.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }
<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
Erweitern Sie das Snippet

Und hier ist eine Live-Demo der Technik, die ausgiebig verwendet wird:

christmas-card-2009.slippyd.com Screenshot

— Slipp D. Thompson
quelle
In welcher Situation möchte man dafür nicht CSS3 verwenden?
— Burkely91
@ Burkely91 Wenn du es in CSS3 kannst, dann benutze das unbedingt. Der CSS3-Hintergrund unterstützt jedoch weder alle Arten von Inhalten noch die volle Flexibilität des Layouts. Das obige Beispiel für Umschläge / Buchstaben ist mit CSS3 aufgrund der sich unabhängig wiederholenden Kanten und Mittenfüllungen nur schwer abziehbar. Denken Sie auch daran, dass diese Antwort ursprünglich vor 5 Jahren geschrieben wurde, bevor die CSS3-Unterstützung weit verbreitet war.
— Slipp D. Thompson
2
@Igor Ivancha Rollte deine Änderungen zurück. Es tut mir leid, das Einrücken der Einrückung von meiner bevorzugten Form (Tabulatoren) in Ihre (2 Leerzeichen) ist nicht cool. Möglicherweise haben Sie gute Gründe, in Ihren täglichen Codeprojekten Einrückungen mit zwei Leerzeichen zu verwenden, aber für die Präsentation im Web haben Registerkarten meines Erachtens den klaren Vorteil: Die tiefere Einrückung erleichtert das Erkennen von Hierarchieebenen und ist weit entfernt Es ist einfacher, Tabulatoren zuverlässig in Leerzeichen umzuwandeln, und dies ist eine kompatiblere Form aller Lesegeräte.
— Slipp D. Thompson
@Igor Ivancha Es scheint auch, dass Sie den Code durch einen Verschönerer ausgeführt haben, der jeden CSS-Selektor und jede Eigenschaft in eine eigene Zeile gesetzt hat. Meine Beispiele wurden mit absichtlichen Zeilenumbrüchen und Abständen geschrieben, um Teile logisch zu gruppieren, die vom Leser zusammen verstanden werden sollten - z. B. teilen die meisten width:& height:Eigenschaften eine Linie, weil sie dieselbe Art von Konstrukt sind und besser als zweidimensionale Form verstanden werden, nicht ein Paar eindimensionaler Einschränkungen. Außerdem sind in einigen Zeilen eine ganze Menge enthalten, da es sich um wiederholte Inhalte handelt, die nicht so wichtig sind, um sie vorzuführen.
— Slipp D. Thompson
@Igor Ivancha Logisches Organisieren, Gruppieren und Stylen ist äußerst wichtig, um vernünftigen, verständlichen Code zu schreiben, genau wie bei allen Arten des Schreibens. Die Änderungen, die Sie vorgenommen haben, waren das Äquivalent dazu, in einen Beitrag zu gehen, alle Absatzumbrüche zu entfernen und nach jedem Satz eine erzwungene neue Zeile einzufügen. Wenn Sie in Ihrer eigenen Arbeit so stumpf pedantisch sein möchten, können Sie dies tun. Aber bitte verfälschen Sie nicht den semantischen Charakter und Ausdruck in der Arbeit anderer Leute.
— Slipp D. Thompson
58

Es ist besser, eine halbtransparente zu verwenden.png .

Öffnen Sie einfach Photoshop , erstellen Sie ein 2x2Pixelbild (das Auswählen 1x1kann einen Internet Explorer-Fehler verursachen! ), Füllen Sie es mit einer grünen Farbe und stellen Sie die Deckkraft auf der Registerkarte "Ebenen" auf 60% ein. Speichern Sie es dann und machen Sie es zu einem Hintergrundbild:

<p style="background: url(green.png);">any text</p>

Es funktioniert natürlich cool, außer im schönen Internet Explorer 6 . Es gibt bessere Korrekturen, aber hier ist ein kurzer Hack:

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}
— Gemeinschaft
quelle
54

Es gibt einen Trick, um das Markup zu minimieren: Verwenden Sie ein Pseudoelement als Hintergrund, und Sie können die Deckkraft festlegen, ohne das Hauptelement und seine untergeordneten Elemente zu beeinflussen:

DEMO

Ausgabe:

Hintergrundopazität mit einem Pseudoelement

Relevanter Code:

p {
  position: relative;
}
p:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: .6;
  z-index: -1;
}
/*** The following is just for demo styles  ***/

body {
  background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat;
  background-size: cover;
}
p {
  width: 50%;
  padding: 1em;
  margin: 10% auto;
  font-family: arial, serif;
  color: #000;
}
img {
  display: block;
  max-width: 90%;
  margin: .6em auto;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
  <img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</p>
Erweitern Sie das Snippet

Browserunterstützung ist Internet Explorer 8 und höher.

— Web-Tiki
quelle
23

Die einfachste Methode wäre die Verwendung eines halbtransparenten PNG -Hintergrundbilds .

Sie können JavaScript verwenden, damit es bei Bedarf in Internet Explorer 6 funktioniert .

Ich verwende die in Transparente PNGs in Internet Explorer 6 beschriebene Methode .

Ansonsten könnten Sie es mit zwei nebeneinander angeordneten Geschwisterelementen fälschen - machen Sie eines halbtransparent und positionieren Sie das andere absolut über der Oberseite .

— Chris
quelle
2
Ich brauche nur eine einfache Hintergrundfarbe. Welche PNG-Größe würde ich mit dieser Farbe erstellen? 1x1 macht das Rendern viel Arbeit, zu viele Pixel machen dieses PNG ziemlich groß (sollte in Ordnung sein, da es komprimiert ist, aber das Rendern muss es noch dekomprimieren, um es zu verwenden) ...
— Stijn Sanders
3
Ich würde etwas wie 30px x 30px empfehlen, das beim Wiederholen weniger Speicher benötigt als ein 1x1 und immer noch klein genug ist, um die Bandbreitennutzung zu minimieren.
— Chris
21

Mit dieser Methode können Sie ein Bild im Hintergrund und nicht nur eine Volltonfarbe anzeigen und andere Attribute wie z. B. Rahmen transparent machen. Es sind keine transparenten PNG-Bilder erforderlich.

Verwenden Sie :before(oder :after) in CSS und geben Sie ihnen den Deckkraftwert, damit das Element seine ursprüngliche Deckkraft beibehält. So können Sie: before verwenden, um ein Faux-Element zu erstellen und ihm den gewünschten transparenten Hintergrund (oder Rahmen) zu geben und ihn hinter den Inhalt zu verschieben, mit dem Sie undurchsichtig bleiben möchten z-index.

Ein Beispiel ( Geige ) (Beachten Sie, dass die DIVwith-Klasse dadnur dazu dient, einen gewissen Kontext und Kontrast zu den Farben bereitzustellen. Dieses zusätzliche Element wird tatsächlich nicht benötigt, und das rote Rechteck wird etwas nach unten und rechts verschoben, um den Hintergrund sichtbar zu lassen das fancyBgElement):

<div class="dad">
    <div class="fancyBg">
        Test text that should have solid text color lets see if we can manage it without extra elements
    </div>
</div>

mit diesem CSS:

.dad {
    background: lime; border: 1px double black; margin: 1ex 2ex;
    padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
    border: 1px dashed black; position: relative; color: white; font-weight: bold;
    z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
    position: absolute; background: red; opacity: .5;
    top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
    /*top: 0; right: 0; bottom: 0; left: 0;*/
    z-index: -1;
}

In diesem Fall .fancyBg:beforehaben die CSS-Eigenschaften, die Sie mit Transparenz haben möchten (roter Hintergrund in diesem Beispiel, kann aber ein Bild oder Rahmen sein). Es ist als absolut positioniert, um es nach hinten zu verschieben .fancyBg(verwenden Sie Werte von Null oder was auch immer für Ihre Bedürfnisse besser geeignet ist).

— Frozenkoi
quelle
17

Das Problem ist, dass der Text in Ihrem Beispiel tatsächlich die volle Deckkraft hat . Es hat die volle Deckkraft innerhalb des pTags, aber das pTag ist nur halbtransparent.

Sie können ein halbtransparentes PNG-Hintergrundbild hinzufügen, anstatt es in CSS zu realisieren, oder Text trennen und in zwei Elemente unterteilen und den Text über das Feld verschieben (z. B. negativer Rand).

Sonst ist es nicht möglich.

Genau wie Chris erwähnt hat: Wenn Sie eine PNG-Datei mit Transparenz verwenden, müssen Sie eine JavaScript-Problemumgehung verwenden, damit sie im lästigen Internet Explorer funktioniert ...

— SvenFinke
quelle
15

Bei fast allen Antworten wird davon ausgegangen, dass der Designer einen einfarbigen Hintergrund wünscht. Wenn der Designer tatsächlich ein Foto als Hintergrund haben möchte, ist JavaScript derzeit die einzige echte Lösung, wie das an anderer Stelle erwähnte jQuery Transify-Plugin .

Was wir tun müssen, ist, an der Diskussion der CSS-Arbeitsgruppe teilzunehmen und sie dazu zu bringen, uns ein Hintergrund-Opazitäts-Attribut zu geben! Es sollte Hand in Hand mit der Funktion für mehrere Hintergründe arbeiten.

— dünner
quelle
14

So mache ich das (es ist vielleicht nicht optimal, aber es funktioniert):

Erstellen Sie das div, was Sie halbtransparent sein möchten. Gib ihm eine Klasse / ID. Lass es leer und schließe es. Geben Sie eine festgelegte Höhe und Breite ein (z. B. 300 x 300 Pixel). Geben Sie ihm eine Deckkraft von 0,5 oder was auch immer Sie möchten, und eine Hintergrundfarbe.

Erstellen Sie dann direkt unter diesem Div ein weiteres Div mit einer anderen Klasse / ID. Erstellen Sie einen Absatz darin, in dem Sie Ihren Text platzieren. Geben Sie die divPosition an: relativ und oben: -295px(das sind negative 295 Pixel). Geben Sie ihm einen Z-Index von 2 für ein gutes Maß und stellen Sie sicher, dass seine Deckkraft 1 ist. Gestalten Sie Ihren Absatz so, wie Sie möchten, aber stellen Sie sicher, dass die Abmessungen kleiner als die des ersten sind, divdamit er nicht überläuft.

Das ist es. Hier ist der Code:

.trans {
  opacity: 0.5;
  height: 300px;
  width: 300px;
  background-color: orange;
}
.trans2 {
  opacity: 1;
  position: relative;
  top: -295px;
}
.trans2 p {
  width: 295px;
  color: black;
  font-weight: bold;
}
<body>
  <div class="trans">
  </div>
  <div class="trans2">
    <p>
      text text text
    </p>
  </div>
</body>
Erweitern Sie das Snippet

Dies funktioniert in Safari 2.x, aber ich weiß nichts über Internet Explorer.

— Paris Ionescu
quelle
Das zusätzliche Element kann vermieden werden und stattdessen ein :before:after
— Pseudoelement
11

Vor einiger Zeit schrieb ich darüber in Cross Browser Background Transparency With CSS .

Mit Bizarrely Internet Explorer 6 können Sie den Hintergrund transparent machen und den Text oben vollständig undurchsichtig halten. Für die anderen Browser empfehle ich dann die Verwendung einer transparenten PNG-Datei.

— Philnash
quelle
9

Wenn Sie ein Photoshop- Typ sind, können Sie auch Folgendes verwenden:

 #some-element {
  background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
 }

Oder:

#some-element {
  background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}
— suraj rawat
quelle
8

Um den Hintergrund eines Elements halbtransparent zu machen, aber den Inhalt (Text und Bilder) des Elements undurchsichtig zu machen, müssen Sie CSS-Code für dieses Bild schreiben und ein Attribut hinzufügen, das opacitymit einem Mindestwert aufgerufen wird.

Zum Beispiel,

.image {
   position: relative;
   background-color: cyan;
   opacity: 0.7;
}

// Je kleiner der Wert, desto transparenter oder weniger transparent.

— Pushp Singh
quelle
Dies ist eine Möglichkeit, dies in modernen Browsern zu tun. Ich kombiniere es mit den RGBA-Werten als Fallback
— Tahir Khalid
Ja richtig. Dies ist eine der Möglichkeiten, mit modernen Browsern umzugehen.
— Pushp Singh
Was meinst du mit "oder der Wert weniger wird Transparenz sein" (es scheint unverständlich)? ( Antworten Sie , indem Sie Ihre Antwort bearbeiten , gegebenenfalls nicht hier in den Kommentaren.)
— Peter Mortensen
7

CSS 3 bietet eine einfache Lösung für Ihr Problem. Verwenden:

background-color:rgba(0, 255, 0, 0.5);

Hier rgbasteht für Rot, Grün, Blau und Alpha-Wert. Der Grünwert wird aufgrund von 255 erhalten, und die halbe Transparenz wird durch einen Alpha-Wert von 0,5 erhalten.

— Touhid Rahman
quelle
Wie unterscheidet sich das von einigen früheren Antworten?
— Peter Mortensen
6

Hintergrundfarbe: rgba (255, 0, 0, 0,5);wie oben erwähnt ist die beste Antwort einfach ausgedrückt. Zu sagen, dass die Verwendung von CSS 3 auch im Jahr 2013 nicht einfach ist, da sich der Grad der Unterstützung durch verschiedene Browser mit jeder Iteration ändert.

Obwohl background-colordies von allen gängigen Browsern unterstützt wird (nicht neu in CSS 3) [1], kann die Alpha-Transparenz schwierig sein, insbesondere mit Internet Explorer vor Version 9 und mit Rahmenfarbe in Safari vor Version 5.1. [2]

Die Verwendung von Compass oder SASS kann die Produktion und die plattformübergreifende Kompatibilität erheblich verbessern.

[1] W3Schools: CSS-Hintergrundfarben-Eigenschaft

[2] Normans Blog: Checkliste für die Browserunterstützung CSS3 (Oktober 2012)

— Will Nielsen
quelle
4

Sie können dies für Internet Explorer 8 lösen, indem Sie (ab) die Verlaufssyntax verwenden. Das Farbformat ist ARGB. Wenn Sie den Sass- Präprozessor verwenden, können Sie Farben mit der integrierten Funktion "ie-hex-str ()" konvertieren.

background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";
— Henrik
quelle
4

Sie können reines CSS 3 : verwenden rgba(red, green, blue, alpha), wobeialpha ist die gewünschte TransparenzstufeJavaScript oder jQuery sind nicht erforderlich.

Hier ist ein Beispiel:

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}
— Peter Mortensen
quelle
3 
<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
    <img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>

http://jsfiddle.net/x2ukko7u/ ?

— premgowda
quelle
2

Sie können dies mit rgba color codeCSS wie im folgenden Beispiel tun .

.imgbox img{
  height: 100px;
  width: 200px;
  position: relative;
}
.overlay{
  background: rgba(74, 19, 61, 0.4);
  color: #FFF;
  text-shadow: 0px 2px 5px #000079;
  height: 100px;
  width: 300px;
  position: absolute;
  top: 10%;
  left: 25%;
  padding: 25px;
}
<div class"imgbox">
<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
  <div class="overlay">
    <p>This is Simple Text.</p>
  </div>
</div>
Erweitern Sie das Snippet

— Rudra
quelle
1

Es gibt eine einfachere Lösung, um ein Bild auf demselben Div zu überlagern. Es ist nicht die richtige Verwendung dieses Tools. Aber es funktioniert wie ein Zauber, dieses Overlay mit CSS zu erstellen.

Verwenden Sie einen eingefügten Schatten wie folgt:

box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);

Das ist alles :)

— edd2110
quelle
1

Sie können RGBA (red, green, blue, alpha) im CSS verwenden . Etwas wie das:

Wenn Sie also einfach so etwas tun, funktioniert dies in Ihrem Fall:

p {
  position: absolute;
  background-color: rgba(0, 255, 0, 0.6);
}

span {
  color: white;
}
— Alireza
quelle
1

Aus meiner Sicht ist der beste Weg, eine Hintergrundfarbe mit Deckkraft zu verwenden, der folgende. Wenn wir dies verwenden, verlieren wir nicht die Deckkraft für die anderen Elemente wie Testfarbe, Rand usw.

background-color: rgba(71, 158, 0, 0.8);

Verwenden Sie Hintergrundfarbe mit Deckkraft

background-color: rgba(R, G, B, Opacity);

Geben Sie hier die Bildbeschreibung ein

— Vinod Kumar
quelle
0

Normalerweise benutze ich diese Klasse für meine Arbeit. Es ist sehr gut.

.transparent {
  filter: alpha(opacity=50); /* Internet Explorer */
  -khtml-opacity: 0.5;       /* KHTML and old Safari */
  -moz-opacity: 0.5;         /* Firefox and Netscape */
  opacity: 0.5;              /* Firefox, Safari, and Opera */
}
Erweitern Sie das Snippet

— Cengkuru Michael
quelle
0

Es hat bei mir funktioniert, wenn ich das Format verwendet habe, #AARRGGBBalso war es das, das für mich funktioniert hat #1C00ff00. Probieren Sie es aus, denn ich habe gesehen, dass es für einige funktioniert und nicht für andere. Ich benutze es in CSS.

— Donald Shahini
quelle
0

Sie können den an den Hexadezimalwert angehängten Deckkraftwert verwenden:

background-color: #11ffeeaa;

In diesem Beispiel aaist die Deckkraft. Eine Opazität 00bedeutet transparent und ffeinfarbig.

Die Deckkraft ist optional, sodass Sie den Hexadezimalwert wie immer verwenden können:

background-color: #11ffee;

Sie können den alten Weg auch verwenden mit rgba():

background-color: rgba(117, 190, 218, 0.5);

Und die backgroundAbkürzung, wenn Sie sicherstellen möchten, dass der Hintergrund keine anderen Stile wie Bilder oder Verläufe aufweist:

background: #11ffeeaa;

Aus der Mozilla-Spezifikation ( https://developer.mozilla.org/en-US/docs/Web/CSS/background-color ):

/* Keyword values */
background-color: red;
background-color: indigo;

/* Hexadecimal value */
background-color: #bbff00;    /* Fully opaque */
background-color: #bf0;       /* Fully opaque shorthand */
background-color: #11ffee00;  /* Fully transparent */
background-color: #1fe0;      /* Fully transparent shorthand  */
background-color: #11ffeeff;  /* Fully opaque */
background-color: #1fef;      /* Fully opaque shorthand  */

/* RGB value */
background-color: rgb(255, 255, 128);        /* Fully opaque */
background-color: rgba(117, 190, 218, 0.5);  /* 50% transparent */

/* HSL value */
background-color: hsl(50, 33%, 25%);         /* Fully opaque */
background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent */

/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;
— AMS777
quelle
-2

Sie können RGB-Farben mit Deckkraft wie einen Farbcode in RGB (63, 245, 0) verwenden, Deckkraft hinzufügen (wie 63, 245, 0, 0,5) und RGB durch RGBA ersetzen. Aist für die Deckkraft zu verwenden.

div {
  background: rgba(63, 245, 0, 0.5);
}
Erweitern Sie das Snippet

— Vijay Sharma
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.