html - nicht - opacity css




Wie gebe ich Text oder Bildern mit CSS einen transparenten Hintergrund? (18)

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

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 scheint, als würden Kindelemente der Deckkraft ihrer Eltern unterworfen, also ist opacity:1 relativ zur opacity:0.6 der Eltern.


Sie können den rgba color code mit css wie in diesem Beispiel rgba color code angegeben verwenden.

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


CSS3 hat eine einfache Lösung für Ihr Problem. Benutzen:

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

Hier steht rgba für Rot, Grün, Blau und Alpha. Der Grünwert wird wegen 255 erhalten, und die halbe Transparenz wird durch den 0,5-Alpha-Wert erhalten.


Die einfachste Methode wäre, ein halbtransparentes Hintergrund- PNG-Bild zu verwenden .

Sie können JavaScript verwenden, damit es in Internet Explorer 6 funktioniert, wenn Sie dies benötigen.

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

Anders als das

Sie könnten es mit two side-by-side sibling elements vortäuschen - eines halbtransparent machen und absolutely position the other over the top ?


Dies ist die beste Lösung, die ich mir vorstellen kann, KEINE CSS 3 -Objekte. Und sie funktioniert auf Firefox, Chrome und Internet Explorer, soweit ich sehen kann.

Platzieren Sie einen Container-DIV und zwei untergeordnete DIVs auf derselben Ebene, einen für den Inhalt und einen für den Hintergrund. Und mithilfe von CSS wird der Hintergrund automatisch an den Inhalt angepasst und der Hintergrund wird mithilfe von z-index tatsächlich in den Hintergrund gestellt.

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


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

DEMO

Ausgabe:

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>

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


Für eine einfache semi-transparente Hintergrundfarbe sind die oben genannten Lösungen (CSS3- oder bg-Bilder) die besten Optionen. Wenn Sie jedoch etwas Schickeres tun möchten (z. B. Animationen, 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 arbeitet mit zwei "Schichten" innerhalb des äußeren Bereichselements:

  • eine (die "Rückseite"), die an die Größe des Bereichselements angepasst ist, ohne den Inhaltsfluss zu beeinträchtigen,
  • und eine (das "cont"), das den Inhalt enthält und hilft, die Größe des Bereichs zu bestimmen.

Die position: relative auf der Scheibe ist wichtig; es teilt der hinteren Ebene mit, dass sie an die Größe des Bereichs angepasst werden soll. (Wenn das <p> -Tag absolut sein muss, ändern Sie den Bereich von einem <p> in ein <span> und packen Sie das alles in ein absolut positioniertes <p> -Tag.)

Der Hauptvorteil dieser Technik gegenüber ähnlichen oben genannten ist, dass der Bereich nicht die angegebene 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 Inline-Block funktioniert; normaler Inline-Block 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 und haben keinen Einfluss auf den Inhaltsfluss. (Wenn Sie mehrere untergeordnete Ebenen in voller Größe benötigen, stellen Sie sicher, dass sie auch die Position haben: absolut, width / height: 100%, und oben / unten / links / rechts: auto).

Eine Einstellung, die die Einstellung des Hintergrunds (über oben / unten / links / rechts) und / oder das Hintergrund-Pinning (durch Entfernen eines der linken / rechten oder oberen / unteren Paare) ermöglicht, besteht darin, stattdessen die 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, IIRC und das letzte Mal, wenn ich es überprüft habe, erfordern, funktioniert die zweite CSS-Variante in Opera nicht.

Dinge, auf die Sie achten sollten:

  • Floating-Elemente innerhalb der Cont-Ebene sind nicht enthalten. Sie müssen sicherstellen, dass sie gelöscht oder anderweitig enthalten sind, oder sie rutschen aus dem Boden.
  • Die Ränder werden auf das Flächenelement und die Auffüllung auf das Cont-Element gesetzt. Verwenden Sie nicht das Gegenteil (Ränder im Inhalt oder Auffüllen im Fensterbereich). Andernfalls werden Sie feststellen, dass die Seite immer etwas breiter als das Browserfenster ist.
  • Wie bereits erwähnt, muss das Ganze Block oder Inline-Block sein. Sie können gerne <div> s anstelle von <span> s verwenden, um Ihr CSS zu vereinfachen.

Eine umfassendere Demo, die die Flexibilität dieser Technik demonstriert, indem sie mit display: inline-block und sowohl mit auto als auch mit spezifischer width s / min-height s 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>

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


Hier ist ein jQuery-Plugin, das alles für Sie erledigt, Transify ( Transify - ein jQuery-Plugin, um problemlos Transparenz / Deckkraft auf den Hintergrund eines Elements anzuwenden ).

Ich bin immer wieder auf dieses Problem gestoßen, also habe ich beschlossen, etwas zu schreiben, das das Leben viel einfacher machen würde. Das Skript hat eine Größe von weniger als 2 KB und erfordert nur eine Codezeile, um es zum Laufen zu bringen. Außerdem kann es die Deckkraft des Hintergrunds animieren, wenn Sie möchten.


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 mit dem Verlaufsfilter in 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-Nummer 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 ist von der CSS-Hintergrundtransparenz ohne Auswirkungen auf untergeordnete Elemente, über RGBa und Filter .

Screenshots Ergebnisnachweis:

Dies ist bei Verwendung des folgenden Codes der Fall:

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


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, old safari */
  -moz-opacity: 0.5;       /* mozilla, netscape */
  opacity: 0.5;           /* fx, safari, opera */
}


Sie können RGBA (red, green, blue, alpha) in CSS verwenden , etwa wie folgt:

Also einfach so etwas tun, das in Ihrem Fall funktioniert:

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

span {
  color: white;
}

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 mithilfe der eingebauten Funktion "ie-hex-str ()" konvertieren.

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

Sie können reines CSS 3 : rgba(red, green, blue, alpha) , wobei alpha die gewünschte Transparenzstufe ist. Es besteht keine Notwendigkeit für JavaScript oder jQuery.

Hier ist ein Beispiel:

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}

Um den Hintergrund eines Elements halbtransparent zu machen, müssen Sie jedoch den Inhalt (Text & Bilder) des Elements undurchsichtig machen. Sie müssen CSS-Code für dieses Bild schreiben und Sie müssen ein Attribut mit der Bezeichnung Deckkraft mit Mindestwert hinzufügen. z.B

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

// Ein geringerer Wert ist mehr Transparenz, oder weniger ist Transparenz.


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

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

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


Wenn Sie Less , können Sie fade(color, 30%) .


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**
}

Es ist besser, ein halbtransparentes .png .

Öffnen Sie einfach Photoshop , erstellen Sie ein 2x2 Pixel-Bild (die Auswahl von 1x1 kann einen Internet Explorer-Fehler verursachen! ), Füllen Sie es mit einer grünen Farbe und setzen Sie die Deckkraft in der Registerkarte "Layer" auf 60%. 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 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');
}

Hintergrundfarbe: rgba (255,0,0,0,5); Wie oben erwähnt, ist die beste Antwort einfach ausgedrückt. Die Verwendung von CSS3 ist auch im Jahr 2013 nicht einfach, da sich die Unterstützung verschiedener Browser mit jeder Iteration ändert.

Die background-color wird zwar von allen gängigen Browsern unterstützt (nicht neu in CSS3) [1], die Alphatransparenz kann jedoch mit Internet Explorer vor Version 9 und mit Randfarbe auf Safari vor Version 5.1 schwierig sein. [2]

Die Verwendung von Kompass oder SASS kann die Produktion und plattformübergreifende Kompatibilität wirklich unterstützen.

[1] W3Schools: CSS-Hintergrundfarbe

[2] Norman-Blog: Browser-Support-Checkliste CSS3 (Oktober 2012)







opacity