Wie reduziere ich die Deckkraft des Hintergrunds eines Elements mit CSS?

Lesezeit: 13 Minuten

Benutzeravatar von Stijn Sanders
Stijn Sanders

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

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>

Es sieht so aus, als ob untergeordnete Elemente der Deckkraft ihrer Eltern unterliegen opacity:1 ist relativ zu opacity:0.6 des Elternteils.

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

    – meinundmeincode

    30. April 2009 um 9:34 Uhr

  • Tatsächlich ist die Deckkraft der untergeordneten Elemente multipliziert durch die Deckkraft des übergeordneten Elements, nicht überschrieben. Also zum Beispiel wenn die p‘s Opazität waren .6 und das span‘s Opazität waren .5 dann wäre die wahre Deckkraft des Textes in der Spanne 0.3.

    – Charvey

    3. Januar 2012 um 4:05 Uhr

  • Denke schon, aber da der Hintergrund durchscheinend ist, brauchst du nicht einmal den Filter / die Deckkraft: codepen.io/anon/pen/ksJug

    – Stijn Sanders

    18. November 2013 um 13:20 Uhr

  • @chharvey was soll passieren wenn ich definiere opacity:.5 für die Eltern u opacity:2 für das untergeordnete Element?

    – Alexander

    4. August 2014 um 12:28 Uhr

  • @Alexander, ich bin froh, dass du diese Frage gestellt hast. Mathematisch würde man vermuten, dass das Kind wieder auf eine Opazität von 1 zurückkehrt. opacity:2; Ist ungültiges CSS. Der Wert der opacity Eigentum muss im inklusiven Bereich liegen [0,1].

    – Charvey

    5. August 2014 um 23:11 Uhr

Verwenden Sie entweder ein halbtransparentes PNG oder 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).

Beachten Sie, dass der Text noch braucht ausreichend Kontrast mit dem Hintergrund, sobald der darunter liegende Hintergrund durchscheint.


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

  • Ist es möglich, dies mit Hex-Farben zu tun? Wie #fff ?

    – Gr

    13. Juli 2011 um 22:32 Uhr

  • @grm: W3C erwog, ein #RRGGBBAA-Hexcodeformat einzuführen, aber sie entschieden sich dagegen (aus verschiedenen Gründen), also können wir es nicht.

    – aussen

    15. Dezember 2012 um 6:59 Uhr

  • @grm mit SASS Du kannst, background-color: rgba(#000, .5);

    – Jürgen Paul

    30. Mai 2013 um 0:34 Uhr


  • Es sei darauf hingewiesen, dass, wenn Sie Transparenz verwenden möchten, Jeder Browser, der RGBA unterstützt, unterstützt auch HSLA, was eine weitaus intuitivere Farbzuordnung ist. IE8 ist der einzige pseudosignifikante Browser, der dies nicht unterstützt. Wenn dies nicht der Fall ist, verwenden Sie HSL (A) für jede Farbe.

    – iono

    28. November 2013 um 8:17 Uhr

  • @outis: Gute Nachrichten, #RRGGBBAA ist jetzt in Farbstufe 4.

    – BoltClock

    26. Februar 2015 um 19:01 Uhr


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 mit dem Verlaufsfilter auch 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 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)";
}

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

Screenshots zum Nachweis der Ergebnisse:

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>

Chrom-33
IE11
IE9
IE8

  • Dieser Beitrag zeigt, wie man es in IE8 macht:robertnyman.com/2010/01/11/…

    – Schlag

    20. August 2010 um 14:20 Uhr

  • @philfreo: Wenn Sie das erste Bit von Sebastians Code in “Hintergrund: rgb (0, 0, 0) transparent;” ändern. es sollte jetzt in IE8 funktionieren. Das hat mich ziemlich lange genervt!

    – Tom Chantler

    7. Februar 2011 um 23:10 Uhr

  • filter:progid Funktioniert hervorragend mit IE 9. Farbe ist: Transparenz, Rot, Grün, Blau – alles zweistellige Hexadezimalwerte.

    – Thorsten Niehues

    6. August 2012 um 9:05 Uhr

  • background: rgb(0, 0, 0) transparent; macht keinen Sinn als transparent überschreibt die Fallback-Farbe (0,0,0) und macht den Hintergrund zu 100 % transparent. Wir streben Halbtransparenz an, daher sollte der Fallback je nach Design entweder einfarbig sein (background: rgb(0, 0, 0);) oder vollständig transparent (background: transparent;).

    – Benutzer664833

    6. Februar 2013 um 23:22 Uhr

  • @AdrienBe – Ich habe Ihre Antwort gemäß Ihren Anweisungen bearbeitet. Leider bin ich seit einiger Zeit nicht mehr in der Lage, diese speziellen Fragen und Antworten zu beantworten, daher kann ich zu diesem Zeitpunkt nichts zu diesem Gespräch beitragen.

    – Benutzer664833

    27. Februar 2014 um 19:41 Uhr

Benutzeravatar von Gorkem Pacaci
Gorkem Pacaci

Dies ist die beste Lösung, die ich mir vorstellen konnte, ohne CSS 3 zu verwenden. Und soweit ich das beurteilen kann, funktioniert sie hervorragend mit Firefox, Chrome und Internet Explorer.

Stellen Sie einen Behälter auf div und zwei Kinder divs auf der gleichen Ebene, eine für den Inhalt, eine für den Hintergrund. Passen Sie den Hintergrund mithilfe von CSS automatisch an den Inhalt an und platzieren Sie den Hintergrund mithilfe des Z-Index tatsächlich im 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>

  • Er sagte: “Ohne Trennung von Text und Hintergrund in zwei übereinander positionierte Elemente.”. Trotzdem danke, dies ist eine gute Lösung und nützlich, aber in einigen Fällen möchten Sie, dass das undurchsichtige Element ein untergeordnetes Element des halbtransparenten Elements ist.

    – Rolf

    19. Dezember 2010 um 17:24 Uhr

  • Ich habe auf eine andere SO-Frage ziemlich gleich geantwortet, aber einen jsfiddle & Screenshot-Beweis (IE7+) hinzugefügt, siehe hier bei Interesse stackoverflow.com/a/21984546/759452

    – Adriano

    25. Februar 2014 um 17:40 Uhr

  • @Gorkem Pacaci: Stellen Sie sicher, dass die Opazitätseigenschaften “wirklich” browserübergreifend sind, Sie können dieses Code-Snippet von CSSTRICKS verwenden css-tricks.com/snippets/css/cross-browser-opacity

    – Adriano

    27. Februar 2014 um 13:40 Uhr


Benutzeravatar von Slipp D. Thompson
Slipp D. Thompson

Für eine einfache halbtransparente Hintergrundfarbe sind die oben genannten Lösungen (CSS3- oder bg-Bilder) die besten Optionen. Wenn Sie jedoch etwas ausgefalleneres machen möchten (z. B. Animation, mehrere Hintergründe usw.) oder wenn Sie 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, indem zwei „Schichten“ innerhalb des äußeren Scheibenelements verwendet werden:

  • eine (die „Rückseite“), die sich an die Größe des Bereichselements anpasst, ohne den Inhaltsfluss zu beeinträchtigen,
  • und eine (die „Fortsetzung“), die den Inhalt enthält und hilft, die Größe des Bereichs zu bestimmen.

Der position: relative auf der Scheibe ist wichtig; Es weist die hintere Schicht an, sich an die Größe der Scheibe anzupassen. (Falls Sie die benötigen <p> Tag absolut sein, ändern Sie den Bereich von a <p> zu einem <span> und wickeln Sie das alles in eine absolut-Position <p> Schild.)

Der Hauptvorteil dieser Technik gegenüber ähnlichen oben aufgeführten besteht darin, dass die Scheibe 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 Pane-Element kann beliebig groß sein, solange es rechteckig ist (dh Inline-Block funktioniert, einfaches altes Inline-Element nicht).

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

Eine Variante, um die Anpassung des Hintergrundeinschubs (über oben/unten/links/rechts) und/oder das Anheften des Hintergrunds (durch Entfernen eines der links/rechts- oder oben/unten-Paare) 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 nicht in Opera.

Dinge, auf die Sie achten sollten:

  • Schwebende Elemente innerhalb des Cont-Layers sind nicht enthalten. Sie müssen sicherstellen, dass sie entfernt oder anderweitig eingeschlossen sind, sonst rutschen sie aus dem Boden.
  • Margins gehen auf das pane-Element und padding geht auf das cont-Element. Verwenden Sie nicht das Gegenteil (Ränder im Cont oder Padding im Bereich) oder Sie werden Kuriositäten entdecken, wie z. B. dass die Seite immer etwas breiter als das Browserfenster ist.
  • Wie bereits erwähnt, muss das Ganze block- oder inline-blockiert sein. Fühlen Sie sich frei zu verwenden <div>s statt <span>s, um Ihr CSS zu vereinfachen.

Eine vollständigere Demo, die die Flexibilität dieser Technik demonstriert, indem sie zusammen mit verwendet wird display: inline-blockund mit beidem 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 Technik, die ausgiebig verwendet wird:

Weihnachtskarte-2009.slippyd.com Screenshot

Benutzeravatar von web-tiki
Web-Tiki

Es gibt einen Trick, um das Markup zu minimieren: Verwenden Sie a Pseudo-Element als Hintergrund und Sie können die Deckkraft darauf einstellen, ohne das Hauptelement und seine untergeordneten Elemente zu beeinflussen:

DEMO

Ausgang:

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>

Browserunterstützung ist InternetExplorer 8 und später.

Benutzeravatar der Community
Gemeinschaft

Es ist besser, ein halbtransparentes zu verwenden .png.

Einfach offen Photoshopein … kreieren 2x2 Pixelbild (Picking 1x1 kann einen Internet Explorer-Fehler verursachen!), füllen Sie es mit einer grünen Farbe und stellen Sie die Deckkraft im “Layers-Tab” 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 in Lovely InternetExplorer 6. Es gibt bessere Lösungen, aber hier ist ein schneller Hack:

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://stackoverflow.com/questions/806000/+currentStyle.backgroundImage.split("\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage="none");
}

Benutzeravatar von Slipp D. Thompson
Slipp D. Thompson

Diese Methode ermöglicht es Ihnen, ein Bild im Hintergrund zu haben und nicht nur eine Volltonfarbe, und kann verwendet werden, um Transparenz bei anderen Attributen wie Rändern zu haben. Es sind keine transparenten PNG-Bilder erforderlich.

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

Ein Beispiel (Geige) (Notiere dass der DIV mit Klasse dad soll nur etwas Kontext und Kontrast zu den Farben bieten, dieses zusätzliche Element wird eigentlich nicht benötigt, und das rote Rechteck wird etwas nach unten und nach rechts verschoben, um den Hintergrund sichtbar zu lassen fancyBg Element):

<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 (roter Hintergrund in diesem Beispiel, kann aber ein Bild oder Rahmen sein). Es ist absolut positioniert, um es hinterher zu bewegen .fancyBg (Verwenden Sie Werte von Null oder was auch immer für Ihre Bedürfnisse besser geeignet ist).

1443580cookie-checkWie reduziere ich die Deckkraft des Hintergrunds eines Elements mit CSS?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy