wake-up-neo.net

Wie erstelle ich einen transparenten Hintergrund ohne Hintergrundbild?

Ich möchte, dass eine div einen transparenten Hintergrund hat.
Ich habe versucht, dies mit background-color und opacity zu tun, aber das Problem ist, dass der Rand und der Text darin auch transparent werden. Beispiel hier.

Ist dies möglich, ohne ein transparentes PNG-Hintergrundbild zu verwenden?

htmlcsstransparentbackground-color
10
Misha Moroshko

Wenn Sie nur möchten, dass die Hintergrundfarbe transparent ist und nicht der untergeordnete Inhalt, verwenden Sie 

background-color: rgba(0,0,0,.5); // Sets to 50% transparent

Weitere Informationen finden Sie auf dieser Seite. Dies ist eine css3-Spezifikation, die nicht in jedem Browser angezeigt wird:

http://www.css3.info/introduction-opacity-rgba/

19
DHuntrods

Ja.

Setze background-color: transparent;

und verwenden Sie nicht opacity, da dies das ganze Div halbtransparent macht.

aktualisierte dein Beispiel unter http://jsfiddle.net/eU7By/1/

UPDATE nach Kommentaren

sie können rgba als Hintergrundfarbe verwenden, wie @DHuntrods erwähnt. IE benötigt einige Verbesserungen des Kurses .. http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/

5
Gabriele Petrioli

Die Cross-Browser-Lösung ist die Verwendung der Opazitätseigenschaft für ein zusätzliches "absolut positioniertes" untergeordnetes Element (in einem relativ oder absolut positionierten übergeordneten Element): Es enthält nur dort den farbigen transparenten Hintergrund.

Dann können Sie die opacity-Eigenschaft verwenden, um dieses Element transparent zu machen. Da dieses Element keine untergeordneten Elemente hat, hat die Deckkraft keine Auswirkungen auf andere Elemente.

Opacity ist eine IE5 + -Eigenschaft, verwenden Sie einfach (siehe http://css-tricks.com/snippets/css/cross-browser-opacity/ ):

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";    /* IE 8 */
filter: alpha(opacity=50);  /* IE 5-7 */
-moz-opacity: 0.5;          /* Netscape */
-khtml-opacity: 0.5;        /* Safari 1.x */
opacity: 0.5;               /* Good browsers */

siehe das jsFiddle-Beispiel http://jsfiddle.net/DUjzX/1/

Der gesamte Code sieht so aus:

Das HTML: 

 <div class="my-cool-wrapper">
      <div class="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>
      <div class="transparent-background">
      </div>
 </div>

Das CSS: 

 .my-cool-wrapper {
      position: relative;
 }
 .my-cool-wrapper .text-and-images-on-top {
      padding: 10px 15px 19px 15px;
      z-index: 1;
      position: relative; /* needed to enable the z-index */
 }
 .my-cool-wrapper .transparent-background {
      position: absolute;
      top: 0;    
      width: 100%;
      height: 100%;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";       /* IE 8 */
      filter: alpha(opacity=10);  /* IE 5-7 */
      -moz-opacity: 0.1;          /* Netscape */
      -khtml-opacity: 0.1;        /* Safari 1.x */
      opacity: 0.1;               /* Good browsers */
      background-color: blue;
 }

read more: Legt die Deckkraft des Hintergrundbilds fest, ohne die untergeordneten Elemente zu beeinflussen

Screenshots Beweise IE7IE8IE9IE10IE11

ps: Ich habe die Screenshots für Chrome, Firefox und Safari nicht hinzugefügt, da es sich um "bessere" Browser handelt ... Vertrauen Sie mir, es funktioniert auch für sie.

1
Adrien Be

Ich musste ein 30x30 transparentes Gif als Hintergrund verwenden.

background:url('absolute path here');
0
Amalgovinus