content transparenz

[agodesign]

Hi, sitze derzeit an meiner neuen website und habe ein Problem mit der Transparenz.

Unbenanntes Dokument

Das Textfeld is transparent das ist ja schön und gut aber alle anderen sachen also texte oder der nivo slider werden auch transparent, hier mal mein code:

<div id="content">

<div id="sld">

<div id="slider" class="nivoSlider">
<img src="images/toystory.jpg" alt="" />
<a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a>
<img src="images/walle.jpg" alt="" />
<img src="images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>

</div>

<div id="text" align="left"> <h1> Herzlich Willkommen! </h1>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>


</div>

und hier die css:

#content {
background-color: #000;
height: 400px;
width: 1000px;
filter:alpha(opacity=75);
-moz-opacity:0.75;
-khtml-opacity: 0.75;
opacity: 0.75;
padding-top: 20px;

}

#sld {
height: 300px;
margin-left: 50px;
margin-right: 50px;
}

#text {
height: 100px;
margin-left: 50px;
margin-right: 50px;
}

Da der text und der nivo slider im content liegen werden die wahrscheinlich auch transparent aber wie kann ich des jetzt ändern?

 

[vast]

aber alle anderen sachen also texte oder der nivo slider werden auch transparent

...das liegt in der Natur der Sache.
Wenn du nur den Hintergrund transparent haben möchtest, musst du dem Element ein .png-image als Hintergrund verpassen, das in deinem Fall mit 75% Deckkraft erstellt/gespeichert wird.
Dann die opacity-Angaben aus dem CSS raus.

cheers

 

[agodesign]

danke dir^^

habe aber schon eine bessere lösung gefunden, für dich vlt auch ganz intressant

Das Stichwort ist RGBA oder ein Hintergrund mit Alpha-Kanal (semitransparente PNGs).
RGBA colors - CSS3 . Info

Opacity betrifft leider immer das gesamte Element (inklusive Text in Form-Feldern).

 

[vast]

coole Sache, funktioniert aber leider nicht in allen Browsern, sogar (noch) in verhältnismäßig wenigen.

Wenn du die Sache einigermassen crossbrowser-Kompatibel machen willst, nimm doch einfach ein .png-Bild in dem die Transparenz schon drin ist, anstatt sie nachträglich per CSS3 reinzubasteln (auch wenn das ne tolle Sache ist).

Da du "design" im Namen trägst, gehe ich davon aus, das du weisst wie man mit Photoshop umgeht ;)

 

[agodesign]

allerdings

kann ja eigentlich ne 1px x 1px .png machen oder? und dann repeat-x und repeat y machen oder?

 

[vast]

kann ja eigentlich ne 1px x 1px .png machen oder? und dann repeat-x und repeat y machen oder?

ja, genau - das sollte klappen.

 

[Space Vampire]

...und dann repeat-x und repeat y machen...

Wenn du in beide Richtungen repeaten willst, brauchst du garnichts machen. das macht der Browser von alleine, wenn keine Angaben da sind ;)

 

[agodesign]

hab in der css jetzt - background-repeat: repeat;

=) funktioniert super
Unbenanntes Dokument