Frage Wie gebe ich Text oder ein Bild mit CSS transparent an?


Ist es möglich, nur mit CSS zu arbeiten? background eines Elements halbtransparent, aber den Inhalt (Text & Bilder) des Elements opak?

Ich möchte das 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>

Es sieht so aus, als ob Kinderelemente der Undurchsichtigkeit ihrer Eltern unterliegen opacity:1 ist relativ zu den opacity:0.6 des Elternteils.


1997
2018-04-30 09:00


Ursprung


Antworten:


Verwenden Sie entweder ein halbtransparentes PNG Bild oder verwenden Sie CSS3:

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

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


2115
2017-07-13 20:51



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

Ein wenig bekannter Trick ist, dass Sie ihn auch mit dem Gradientenfilter im Internet Explorer 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 aller 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)";
}

Das ist von CSS-Hintergrundtransparenz ohne Auswirkungen auf untergeordnete Elemente durch RGBa und Filter.

Screenshots Nachweis der Ergebnisse:

Dies ist, 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


456
2018-04-30 20:42



Dies ist die beste Lösung, die ich mir vorstellen konnte, NICHT mit CSS 3. Und es funktioniert großartig in Firefox, Chrome und Internet Explorer soweit ich sehen kann.

Setzen Sie einen Container-DIV und zwei Kinder-DIVs auf die gleiche Ebene, einen für den Inhalt, einen für den Hintergrund. Passen Sie den Hintergrund mithilfe von CSS automatisch an den Inhalt an, und legen Sie den Hintergrund mithilfe von z-index in den Hintergrund.

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


97
2018-05-24 16:07



Es ist besser, ein halbtransparentes zu verwenden .png.

Einfach offen Photoshop, ein ... kreieren 2x2 Pixelbild (pflücken 1x1 kann einen Internet Explorer-Fehler verursachen!), fülle es mit einer grünen Farbe und setze die Deckkraft in "Ebenen" auf 60%. Dann speichern Sie es und machen Sie es zu einem Hintergrundbild:

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

Es funktioniert natürlich cool, außer in schönen Internet Explorer 6. Es gibt bessere Fixes, 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');
}

54
2017-10-05 08:15



Für eine einfache halbtransparente Hintergrundfarbe sind die obigen Lösungen (CSS3- oder BG-Bilder) die besten Optionen. Wenn Sie jedoch etwas Zarteres machen möchten (z. B. Animationen, 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 arbeitet mit zwei "Schichten" innerhalb des äußeren Scheibenelements:

  • eine (die "Rückseite"), die der Größe des Fensterelements entspricht, ohne den Fluss des Inhalts zu beeinflussen,
  • und eine (die "cont"), die den Inhalt enthält und hilft, die Größe des Bereichs zu bestimmen.

Das position: relative auf der Scheibe ist wichtig; Er teilt der Back-Schicht mit, wie groß sie sein soll. (Wenn Sie das brauchen <p> Tag, um absolut zu sein, ändern Sie den Bereich von a <p> zu einem <span> und alles in eine absolute Position bringen <p> Etikett.)

Der Hauptvorteil dieser Technik gegenüber den oben aufgeführten besteht darin, dass das Fenster keine bestimmte Größe haben muss; wie oben codiert, passt es in die volle Breite (normales Blockelement-Layout) und nur so hoch wie der Inhalt. Das äußere Fensterelement kann nach Belieben angepasst werden, solange es rechteckig ist (d. H. Inline-Block funktioniert; Normal-Inline nicht).

Außerdem gibt es Ihnen viel Freiheit für den Hintergrund; Sie können wirklich alles in das Back-Element einfügen und haben keinen Einfluss auf den Fluss des Inhalts (wenn Sie mehrere Full-Size-Sub-Layer haben wollen, stellen Sie sicher, dass sie auch die Position haben: absolut, width / height: 100%, und oben / unten / links / rechts: auto).

Eine Variation, um Hintergrundinset-Anpassung (über Oben / Unten / Links / Rechts) und / oder Hintergrund-Pinning (durch Entfernen eines der Paare links / rechts oder oben / unten) zu ermöglichen, besteht stattdessen in der Verwendung des folgenden CSS:

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

Wie geschrieben, funktioniert das in Firefox, Safari, Chrome, IE8 + und Opera, obwohl IE7 und IE6 zusätzliche CSS und Ausdrücke, IIRC, benötigen und das letzte Mal, als ich es überprüft habe, funktioniert die zweite CSS-Variante nicht in Opera.

Dinge zu beachten für:

  • Floating-Elemente innerhalb der Cont-Layer werden nicht enthalten sein. Sie müssen sicherstellen, dass sie gelöscht oder anderweitig enthalten sind, oder sie werden aus dem Boden rutschen.
  • Die Ränder gehen auf das Fensterelement und das Padding geht auf das Element cont. Verwenden Sie nicht das Gegenteil (Ränder auf dem Fortsymbol oder Füllzeichen auf dem Fenster) oder Sie werden Kuriositäten entdecken, z. B. dass die Seite immer etwas breiter als das Browserfenster ist.
  • Wie erwähnt, muss das Ganze Block oder Inline-Block sein. Fühlen Sie sich frei zu benutzen <div>s statt <span>s, um Ihr CSS zu vereinfachen.

Ein volleres Demo, das die Flexibilität dieser Technik zeigt, indem es zusammen mit display: inline-blockund mit beiden auto & Spezifisch widths /min-heights:

.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 verwendeten Technik:

christmas-card-2009.slippyd.com screenshot


51
2018-04-30 09:11



Es gibt einen Trick, um das Markup zu minimieren: Verwenden Sie a Pseudoelement als Hintergrund und Sie können die Opazität darauf einstellen, ohne das Hauptelement und seine Kinder zu beeinflussen:

DEMO

Ausgabe:

Background opacity with a pseudo element

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>

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


47
2018-01-14 00:14



Die einfachste Methode wäre, einen halbtransparenten Hintergrund zu verwenden PNG-Bild.

Sie können JavaScript verwenden, damit es funktioniert Internet Explorer 6 wenn du musst.

Ich benutze die Methode, die in Transparente PNGs in Internet Explorer 6.

Abgesehen davon,

Du könntest es mit gefälschst two side-by-side sibling elements - machen ein halbtransparenter, dann absolutely position the other over the top?


23
2018-04-30 09:14



Diese Methode ermöglicht es Ihnen, ein Bild im Hintergrund und nicht nur eine Volltonfarbe zu haben, und kann verwendet werden, um Transparenz für andere Attribute wie Rahmen zu haben. Keine transparenten PNG-Bilder sind erforderlich.

Benutzen :before (oder :after) in CSS und geben Sie ihnen den Opazitätswert, um das Element an der ursprünglichen Deckkraft zu belassen. So können Sie: before verwenden, um ein faux-Element zu erstellen und ihm den transparenten Hintergrund (oder die Ränder) zu geben, den Sie möchten, und es hinter den Inhalt verschieben, mit dem Sie undurchsichtig bleiben möchten z-index.

Ein Beispiel (Geige) (Notiere dass der DIV mit Klasse dad Englisch: www.doc-o-matic.com/webhelp/TdlgGuides.html Um nur ein wenig Kontext und Kontrast zu den Farben zu schaffen, wird dieses zusätzliche Element eigentlich nicht benötigt, und das rote Rechteck wird ein wenig nach unten und nach rechts verschoben, um den dahinter liegenden Hintergrund sichtbar zu lassen 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:before hat die CSS-Eigenschaften, die Sie mit Transparenz haben möchten (in diesem Beispiel roter Hintergrund, kann aber ein Bild oder Rahmen sein). Es ist absolut positioniert, um es hinter sich zu lassen .fancyBg (Verwenden Sie Werte von Null oder was auch immer für Ihre Bedürfnisse besser geeignet ist).


20
2018-01-26 16:36



Das Problem ist, dass der Text in Ihrem Beispiel tatsächlich volle Deckkraft hat. Es hat volle Opazität in der p Tag, aber die p Das Tag ist nur halbtransparent.

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

Sonst wird es nicht möglich sein.

BEARBEITEN:

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


14
2017-10-25 13:55



Fast alle diese Antworten gehen davon aus, dass der Designer einen einfarbigen Hintergrund wünscht. Wenn der Designer tatsächlich ein Foto als Hintergrund haben möchte, ist die einzige wirkliche Lösung im Moment JavaScript wie das jQuery Transify Plugin an anderer Stelle erwähnt.

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


14
2018-04-30 09:13