Wie man einen transparenten hintergrund, ohne hintergrund-Bild?

Ich würde gerne eine div um einen transparenten hintergrund haben.
Ich habe versucht, dies zu tun mit background-color und opacity, aber das problem ist, dass die Grenze und der text innen auch transparent. Beispiel hier.

Ist dies möglich, ohne die Verwendung von transparenten PNG-hintergrund Bild ?

Würde ich beantworten mit background-color: transparent aber ich glaube nicht, dass du suchst. Was genau meinst du mit einem transparenten hintergrund? Edit: von Ihnen positiv bewertet werden Gaby ' s Antwort, falls Sie waren auf der Suche nach einer völlig transparenten hintergrund.
Dies ist nicht wollen, ich bin auf der Suche nach. Siehe mein Kommentar zu Gaby ' s Antwort weiter unten.
Verwandte stackoverflow.com/questions/806000/...
im Zusammenhang stackoverflow.com/q/4997493/759452

InformationsquelleAutor Misha Moroshko | 2010-07-11

19

Wenn Sie wollen einfach nur die Farbe der hintergrund transparent sein und nicht das Kind Inhalt, die Nutzung

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

Finden Sie auf dieser Seite für weitere details - es ist eine der css3-Spezifikation, so wird nicht zeigen, bis in jedem browser:

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

Beachten Sie, dass rgba ist nicht kompatibel mit IE8, ist aber kompatibel mit IE10+ (IE9 vielleicht auch), Firefox 3+, Safari 3+, Chrome. Sie können css3pie polyfill-Bibliothek (siehe stackoverflow.com/tags/css3pie/hot) damit dieses feature arbeiten auf IE8 & unten.

InformationsquelleAutor DHuntrods
5

Ja.

Set
background-color: transparent;

verwenden Sie nicht opacity, wie das ist, was macht semi-transparent den gesamten div..

aktualisiert Ihre Beispiel bei http://jsfiddle.net/eU7By/1/

UPDATE nach Kommentaren

können Sie verwenden, rgba für die hintergrund-Farbe als @DHuntrods erwähnt. IE braucht einige Optimierungen von'course.. http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/

Ich meinte die hintergrund-Farbe sollte semi-transparent sein. In meinem Beispiel, der schwarze hintergrund sollte semi-transparent (je nach Deckkraft).

InformationsquelleAutor Gabriele Petrioli

Die meisten cross-browser-Lösung ist die Verwendung der Eigenschaft "Deckkraft" auf einer weiteren "absolut positioniert" Kind-element (in einer relativ oder absolut positioniert Eltern): es wird nur dort enthalten die farbigen transparenten hintergrund.

Dann können Sie die opacity Eigenschaft, um dieses element transparent. Da dieses element keine Kinder hat, die Deckkraft wird auf keinem anderen element.

Deckkraft ist ein 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 jsFiddle Beispiel http://jsfiddle.net/DUjzX/1/

Der gesamte code sieht wie folgt aus:

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>

Der 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;
 }

Lesen Sie mehr:
Setzen Sie die Deckkraft der hintergrund-Bild ohne Auswirkung auf child-Elemente

Screenshots Beweise
Wie man einen transparenten hintergrund, ohne hintergrund-Bild?

ps: ich habe nicht fügen Sie die screenshots für Chrome, Firefox & Safari, da diese viel "besser" Browser... Vertrauen Sie mir, es funktioniert auch für Sie.

InformationsquelleAutor Adrien Be

0

Musste ich eine 30x30, transparente gif als hintergrund.
```
background:url('absolute path here');
```
InformationsquelleAutor Amalgovinus

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.