Webseite Div Overlay für alle Inhalte

Ich habe eine Webseite, die mit CSS formatiert istWebseite Div Overlay für alle Inhalte

Der Inhalt der Webseite ist in DIV enthalten.

Example: 
<div id="container"> 
<div id="ticker"> 
</div> 
<div id="header"> 
</div> 
<div id="content"> 
</div> 
<div id="footer"> 
</div> 
</div>

Ich möchte einen Hintergrund auf dem div-Container, der als halbtransparenten Hintergrund (in einer gewünschten Farbe), und dann werden alle Inhalte innerhalb des div erscheinen normalerweise ohne Transparenz zeigen.

Ich habe versucht, Methoden einschließlich einer Opazität auf die Eltern-Div anwenden, aber es gilt es für alle Kinder Divs, die ich nicht will.

Wie mache ich das?

Quelle

2012-03-25 Kevin

Verwenden Sie ein 1x1-Hintergrundbild (ein Png) mit der gewünschten Transparenz und lassen Sie es sich wiederholen.

Quelle

2012-03-25 03:15:22 lbreau

ich nicht das Hintergrundbild der Webseite transparent sein. Nur das Container-div, das den gesamten Inhalt der Webseite enthält. – Kevin

richtig, setzen Sie das 1x1 auf das div, nicht auf den Körper – lbreau

Sie könnten einen RGBA-Wert für Ihre Hintergrundfarbe statt und stellen Sie den Alpha-Wert auf die gewünschte Opazität Ebene verwenden:

background-color:rgba(255,255,255,0.125);

http://www.w3schools.com/cssref/css_colors_legal.asp

Quelle

2012-03-25 03:17:01 KodeKreachor

Ich möchte nicht das Hintergrundbild der Webseite transparent sein. Nur das Container-div, das den gesamten Inhalt der Webseite enthält – Kevin

In diesem Fall würde ich empfehlen, ein Bild auf Ihrer Seite zu platzieren, das das gewünschte Hintergrundbild darstellt, und seinen Z-Index niedriger als eines seiner Geschwister festzulegen. – KodeKreachor

Oder eine andere Option wäre ein anderes Div mit seinem Hintergrundbild als Hintergrundbild und dann das Bild in Ihre CSS-Datei auf der Hintergrund-Image-Eigenschaft dieses Divs einbetten. – KodeKreachor

Sie rgba Wert für diese verwenden können. Schreiben wie folgt aus:

#container{ 
background:rgba(0,0,0,0.5) 
}

Denn es IE für diese wie folgt filtern:

background: transparent; 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE6 & 7 */  
    zoom: 1;

Sie können Generator möchten Ihre rgba Filter von hier http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

Quelle

2012-03-25 03:18:10 sandeep

Was passiert, wenn ich ein Bild als Hintergrund im BODY-Style-Tag habe? – Kevin

Sie können auch ein Bild angeben, aber ein Bild sendet eine zusätzliche HTTP-Anforderung, wenn Ihre Webseite geladen wird. Also, es ist gut, mit CSS zu geben. – sandeep

Antwort

Verwandte Themen