|
Vorheriges Thema: Nächstes Thema: |
Autor |
Nachricht |
defcon1
Anmeldungsdatum: 28.11.2008 Beiträge: 2
|
Verfasst am: 28.11.2008 07:33:23 Titel: Durchsichtiges DIV-Layer mit vollfarbenem Inhalt ohne Alpha |
|
|
Hi miteinander,
ich würde gerne folgendes machen und schaffe es irgendwie nicht:
Ich habe eine Webseite mit einem vollflächigen Bild als Hintergrund. Um jetzt ein Menü zu machen,
würde ich gerne eine Box erstellen, durch welche das Hintergrund-Bild durchscheint (Opacity-Eigenschaft).
Als Layer oben drauf dann das Menü (Text), welcher aber ohne Alpha-Effekt sein soll. Habe das bei
meebo.com gesehen.
Das habe ich, aber leider scheint der Hintergrund auch auf den Text und das Image durch:
Code: |
<div id="container">
<div style="z-index:1; width: 320px; position:absolute; background-color:blue; filter: alpha(opacity=60); opacity: 0.6;-moz-opacity: 0.6;-khtml-opacity: 0.6;">
<div style="z-index:2; height: 320px"></div>
</div>
<div style="z-index:3; width:320px;"><br/><br/><br/>HELLO WORLD<img src="images/cancel.gif" /></div>
</div>
|
|
|
Nach oben |
|
|
Frosty Häufiger Poster
Anmeldungsdatum: 27.10.2008 Beiträge: 221
|
Verfasst am: 28.11.2008 09:30:27 Titel: |
|
|
Der Div-Container, in welchem "HELLO WORLD" steht wird immer hinter dem div mit dem Alpha-Wert stehen, da kannst du noch soviel z-index Werte nach oben gehen. Verpasse dem HELLO-WORLD-Container mal eine absolute Position:
Code: |
<div style="position:absolute;z-index:3; width:320px;"><br/><br/><br/>HELLO WORLD<img src="images/cancel.gif" /></div> |
|
|
Nach oben |
|
|
defcon1
Anmeldungsdatum: 28.11.2008 Beiträge: 2
|
Verfasst am: 28.11.2008 14:50:09 Titel: |
|
|
Vielen Dank, Frosty!
Das wars. Kannst du mir es kurz erklären, ich verstehe
nämlich nicht was es mit der Position zu tun hat!?
Grüße,
defcon1 |
|
Nach oben |
|
|
Frosty Häufiger Poster
Anmeldungsdatum: 27.10.2008 Beiträge: 221
|
Verfasst am: 28.11.2008 14:55:56 Titel: |
|
|
Einem Element mit der position-Angabe nimmst du einfach gesagt seine statische Verankerung aus dem Quelltext, um es woanders platzieren zu können.
Zitat: |
Die z-index-Eigenschaft wirkt nur in Verbindung mit einer Angabe zu position. |
Kurzum: z-index ist nur anwendbar, wenn das Element keine (wie oben beschrieben) statische Verankerung mehr hat und mit dem position-Attribut versehen ist. |
|
Nach oben |
|
|
Peter Gedamke Häufiger Poster
Anmeldungsdatum: 21.08.2008 Beiträge: 20 Wohnort: Berlin
|
Verfasst am: 28.11.2008 15:10:43 Titel: |
|
|
andernfalls - also ohne index-Angabe - legen sich die <div's in der Reihenfolge ihrer Eingabe übereinander...
muss ja aber nicht sein
|
|
Nach oben |
|
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben. Du kannst auf Beiträge in diesem Forum nicht antworten. Du kannst deine Beiträge in diesem Forum nicht bearbeiten. Du kannst deine Beiträge in diesem Forum nicht löschen. Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
|
|