Wie kann ich einem Text oder einem Bild mit CSS einen transparenten Hintergrund geben?

Question

Wie kann ich einem Text oder einem Bild mit CSS einen transparenten Hintergrund geben?

Gefragt el 30 de April, 2009: Wann wurde die Frage gestellt
1561638 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ist es möglich, nur mit CSS, um die background eines Elements halbtransparent sein, aber den Inhalt (Text und Bilder) des Elements undurchsichtig machen?

Ich möchte dies erreichen, ohne dass der Text und der Hintergrund zwei separate Elemente sind.

Beim Ausprobieren:

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>

Es sieht so aus, als ob untergeordnete Elemente der Deckkraft ihrer übergeordneten Elemente unterworfen sind, also opacity:1 ist relativ zum opacity:0.6 des Elternteils.

Gefragt el 30 de April, 2009 von Stijn Sanders

21 Stimmen

Leider nicht, CSS3 zielt darauf ab, dies mit dem neuen Farbmodul zu beheben, es würde Ihnen erlauben, einen Alpha-Wert anzugeben, wenn Sie eine Farbe angeben. w3.org/TR/css3-color

Kommentiert el 30 de April, 2009 von meandmycode

77 Stimmen

Eigentlich ist die Deckkraft der untergeordneten Elemente multipliziert durch die Deckkraft des übergeordneten Elements, nicht außer Kraft gesetzt. Wenn also zum Beispiel das p Die Opazität von .6 und die span Die Opazität von .5 dann wäre die tatsächliche Deckkraft des Textes im Bereich 0.3 .

Kommentiert el 3 de Januar, 2012 von chharvey

0 Stimmen

Ist dieses Live-Beispiel das, was wir mit dieser Antwort erreicht haben? codepen.io/pablofiumara/pen/EIFaH

Kommentiert el 17 de November, 2013 von pablofiumara

Anzeigen 4 weitere Kommentare

Answer 1

5 Antworten

Answer 2

2402voto

Georg Schölly Punkte 120083

Entweder verwenden Sie ein halbtransparentes PNG o SVG Bild oder CSS verwenden:

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

Hier ist ein Artikel von css3.info, _Deckkraft, RGBA und Kompromiss_ (2007-06-03).

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

Beantwortet el 30 de April, 2009 von Georg Schölly (120083 Punkte )

Answer 3

489voto

Sebastian Markbåge Punkte 3265

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

Ein wenig bekannter Trick ist, dass Sie ihn auch im Internet Explorer verwenden können, indem Sie den Verlaufsfilter benutzen.

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

Die erste Hexadezimalzahl definiert den Alphawert 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 ist von CSS-Hintergrundtransparenz ohne Auswirkungen auf untergeordnete Elemente, durch RGBa und Filter .

Screenshots zum Nachweis der Ergebnisse:

Dies ist der Fall, wenn Sie den folgenden Code verwenden:

 <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

Beantwortet el 21 de Kann, 2009 von Sebastian Markbåge (3265 Punkte )

Answer 4

120voto

Gorkem Pacaci Punkte 1691

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

Einen Behälter aufstellen div und zwei Kinder div s auf der gleichen Ebene, eine für den Inhalt, eine für den Hintergrund. Und mit CSS, Auto-Size den Hintergrund, um den Inhalt passen und setzen Sie den Hintergrund tatsächlich in den Rücken mit z-index.

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

Beantwortet el 13 de Juli, 2010 von Gorkem Pacaci (1691 Punkte )

Answer 5

73voto

Slipp D. Thompson Punkte 30425

Für eine einfache halbtransparente Hintergrundfarbe sind die oben genannten Lösungen (CSS3 oder bg images) die besten Optionen. Wenn Sie jedoch etwas Ausgefalleneres wünschen (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>

Die Technik funktioniert durch die Verwendung von zwei "Schichten" innerhalb des äußeren Fensterelements:

eine (die "Rückseite"), die der Größe des Fensterelements entspricht, ohne den Fluss des Inhalts zu beeinträchtigen,
und eine (die "cont"), die den Inhalt enthält und dazu beiträgt, die Größe des Fensters zu bestimmen.

El position: relative auf der Scheibe ist wichtig; es sagt der hinteren Ebene, dass sie sich an die Größe der Scheibe anpassen soll. (Wenn Sie die  Tag absolut sein soll, ändern Sie das Fenster von einem  à un  und verpacken Sie das Ganze in eine Absolut-Position  Tag.)

Der Hauptvorteil dieser Technik gegenüber den oben genannten ist, dass der Bereich keine bestimmte Größe haben muss; wie oben kodiert, passt er in voller Breite (normales Blockelement-Layout) und nur so hoch wie der Inhalt. Das äußere Fensterelement kann beliebig groß sein, solange es rechteckig ist (d.h. inline-block wird funktionieren; plain-old inline wird nicht funktionieren).

Außerdem gibt es Ihnen viel Freiheit für den Hintergrund; Sie können wirklich alles in das hintere Element einfügen, ohne dass es den Fluss des Inhalts beeinträchtigt (wenn Sie mehrere Unterebenen in voller Größe haben möchten, stellen Sie einfach sicher, dass sie auch position: absolute, width/height: 100%, und top/bottom/left/right: auto haben).

Eine Variante, die die Anpassung des Hintergrunds (über oben/unten/links/rechts) und/oder das Anheften des Hintergrunds (durch Entfernen eines der Paare links/rechts oder oben/unten) ermöglicht, 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ätzliche CSS und Ausdrücke benötigen, IIRC, und das letzte Mal, als ich es überprüft habe, funktioniert die zweite CSS-Variante nicht in Opera.

Worauf Sie achten sollten:

Schwebende Elemente innerhalb der Konturebene sind nicht enthalten. Sie müssen sicherstellen, dass sie geleert oder anderweitig eingeschlossen sind, sonst rutschen sie aus dem Boden heraus.
Die Ränder werden auf das Element "pane" und die Füllung auf das Element "cont" angewendet. Verwenden Sie nicht das Gegenteil (Ränder auf dem cont-Element oder padding auf dem pane-Element), sonst werden Sie feststellen, dass die Seite immer etwas breiter als das Browserfenster ist.
Wie bereits erwähnt, muss das Ganze als Block oder Inline-Block ausgeführt werden. Sie können gerne <div> s anstelle von  s, um Ihr CSS zu vereinfachen.

Eine ausführlichere Demo, die die Flexibilität dieser Technik in Verbindung mit display: inline-block und mit beiden auto & spezifisch width s/ min-height s:

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

Und hier ist ein Live-Demo der Technik, die in großem Umfang eingesetzt wird:

Beantwortet el 24 de Kann, 2010 von Slipp D. Thompson (30425 Punkte )

Answer 6

64voto

web-tiki Punkte 91831

Es gibt einen Trick, um den Aufschlag zu minimieren: Verwenden Sie eine Pseudoelement als Hintergrund und Sie können die Deckkraft darauf einstellen, ohne dass sich dies auf das Hauptelement und seine untergeordneten Elemente auswirkt:

DEMO

Ausgabe:

Background opacity with a pseudo element

Einschlägiger 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>

Die Browserunterstützung ist Internet Explorer 8 und später.

Beantwortet el 5 de Oktober, 2014 von web-tiki (91831 Punkte )

Wie kann ich einem Text oder einem Bild mit CSS einen transparenten Hintergrund geben?

Antworten

Screenshots zum Nachweis der Ergebnisse:

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Wie kann ich einem Text oder einem Bild mit CSS einen transparenten Hintergrund geben?

Antworten

Screenshots zum Nachweis der Ergebnisse:

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: