HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum
 

 
 

Anzeige 
 
HTMLWorld » Forum

Thema anzeigen - Durchsichtiges DIV-Layer mit vollfarbenem Inhalt ohne Alpha

 FAQFAQ   SuchenSuchen   MitgliederlisteMitgliederliste   BenutzergruppenBenutzergruppen   RegistrierenRegistrieren 
 ProfilProfil   Einloggen, um private Nachrichten zu lesenEinloggen, um private Nachrichten zu lesen   LoginLogin 

Durchsichtiges DIV-Layer mit vollfarbenem Inhalt ohne Alpha

 

Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   CSS
Vorheriges Thema:
Nächstes Thema:  
Autor Nachricht
defcon1



Anmeldungsdatum: 28.11.2008
Beiträge: 2

BeitragVerfasst am: 28.11.2008 07:33:23    Titel: Durchsichtiges DIV-Layer mit vollfarbenem Inhalt ohne Alpha Antworten mit Zitat

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
Benutzer-Profile anzeigen Private Nachricht senden
Frosty
Häufiger Poster


Anmeldungsdatum: 27.10.2008
Beiträge: 221

BeitragVerfasst am: 28.11.2008 09:30:27    Titel: Antworten mit Zitat

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
Benutzer-Profile anzeigen Private Nachricht senden
defcon1



Anmeldungsdatum: 28.11.2008
Beiträge: 2

BeitragVerfasst am: 28.11.2008 14:50:09    Titel: Antworten mit Zitat

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
Benutzer-Profile anzeigen Private Nachricht senden
Frosty
Häufiger Poster


Anmeldungsdatum: 27.10.2008
Beiträge: 221

BeitragVerfasst am: 28.11.2008 14:55:56    Titel: Antworten mit Zitat

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
Benutzer-Profile anzeigen Private Nachricht senden
Peter Gedamke
Häufiger Poster


Anmeldungsdatum: 21.08.2008
Beiträge: 20
Wohnort: Berlin

BeitragVerfasst am: 28.11.2008 15:10:43    Titel: Antworten mit Zitat

andernfalls - also ohne index-Angabe - legen sich die <div's in der Reihenfolge ihrer Eingabe übereinander...
muss ja aber nicht sein
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   CSS
Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

 
Gehe zu:  
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.