| 

.NET C# Java Javascript Exception

4
Ich habe eine Internetseite, deren Farbe ich als Effekt verdunkeln möchte. Sprich es erscheint eine Werbung die der Kunde anklickt und die Seite im Hintergrund wird generell verdunkelt. Wird die Werbung geschlossen, erscheint die Seite wieder ganz normal.Folgendes Skript habe ich schon probiert. Leider ohne Erfolg:

padding: 0;
margin: 0;
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
background-color: #000000;
opacity: 0.4;
filter:alpha(opacity=40);


Wie lässt sich das korrigieren?


[EDIT] Schlagwort korrigiert
21.12.2011
crunchcorn
crunchcorn
11 ● 1
Editiert 21.12.2011
Karl
Karl
850 ● 7
2 Antworten
2
Hallo,

also mit dem css opacity ist schon mal ein guter Anfang. Du solltest allerdings bedenken das es nicht von jedem Browser richtig behandelt wird.
.transparent { -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50; }


Das sollte überall gehen.

Von der allgemeinen Technik her funktioniert es so, das du ein <div class="transparent">..</div> über die komplette Seite legst, damit die Seite abgedunkelt aussieht. Über dieses Element drüber kommt dann deine Werbung.

Wenn du Hilfe bei deinem JavaScript brauchst wäre etwas Code hilfreich.

Grüße
21.12.2011
Nicolai Schönberg
Nicolai Schönberg
2,3k ● 1 ● 8
2
Ich hab dein Script im IE 8, Firefox 9 und Chrome 15 getestet. Und es funktioniert.

Demo: http://jsfiddle.net/br8f8/

Welchen DocType verwendest du?
In welchem Browser geht es nicht?
Hast du Elemente mit einem höhren z-Index?

Beispiel-Code:

<!DOCTYPE html>
<html>
  <head>
    <style type='text/css'>
      .overlay{  
        padding: 0;
        margin: 0;
        top: 0;
        left: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-color: #000000;
        opacity: 0.4;
        filter:alpha(opacity=40);   
     }
    </style>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet.</p>
    <div class="overlay"></div>
  </body>
</html>
21.12.2011
Floyd
Floyd
11,0k ● 3 ● 9

Stelle deine Web-Frage jetzt!