Willi: CSS Transparenz unerwünscht aber vorhanden

Hallo,

Ich habe gerade ein kleines Problemchen.
Auf meiner Homepage www.abi10-asg.de.vu habe ich seit gestern ein neues Login-Formular, welches mit JavaScript eingeblendet wird.
Ich habe dort mit -moz-opacity und opacity gearbeitet, damit der Hintergrund noch leicht durchscheint, aber das Formular in der Mitte des Bildschirms hat jetzt auch eine Transparenz.
Ich bekomme es einfach nicht hin, sie wegzumachen, hab schon verschiedenes ausprobiert.

Hier mal der Code, den Javascript an den Browser sendet, wenn das Loginformular eingeblendet ist:

<div id="loginform" style="position: absolute; top: 0pt; left: 0pt; width: 100%; height: 100%; background-color: black; opacity: 0.85; z-index: 9;">  
<div style="border: 3px solid black; padding: 5px; position: absolute; background-color: white; width: 300px; top: 45%; height: 120px; left: 35%; text-align: center; opacity: 2; z-index: 555;">  
<form action="anmelden.php" method="post">  
  <input onblur="if(this.value=='') this.value = this.defaultValue;" onfocus="if(this.value==this.defaultValue) this.value = '';" value="Name" name="username" type="text">  
  <input onblur="if(this.value=='') this.value = this.defaultValue;" onfocus="if(this.value==this.defaultValue) this.value = '';" value="Passwort" name="password" type="password">  
  <input value="Abschicken!" name="submit_login" type="submit">  
  <input value="einsteckbrief.php?id=13" name="returnto" type="hidden">  
</form>  
<p>  
<a href="javascript: hideloginform()">  
Login-Formular ausblenden  
</a>  
</p>  
</div>  
</div>

Ich hoffe ihr könnt mir helfen.

Willi

  1. hi,

    Ich habe dort mit -moz-opacity und opacity gearbeitet, damit der Hintergrund noch leicht durchscheint, aber das Formular in der Mitte des Bildschirms hat jetzt auch eine Transparenz.
    Ich bekomme es einfach nicht hin, sie wegzumachen, hab schon verschiedenes ausprobiert.

    http://forum.de.selfhtml.org/archiv/2007/3/t148818/#m965847

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Hallo,

      http://forum.de.selfhtml.org/archiv/2007/3/t148818/#m965847

      Ok, dankeschön.
      Aber irgendwie verstehe ich das nicht... wenn ich ein anderes DIV im Vordergrund habe, warum ist das dann auch noch transparent?! Obwohl es ja eigentlich nichts mehr mit dem anderen zu tun hat? Und auch mit dem z-index gehts ja net...

      Na gut, aber ich denke, ich werde das dann mit einer transparenten PNG-Grafik machen. Schade, dass es net auch so geht.

      Grüße,
      Willi

      1. Hallo

        Aber irgendwie verstehe ich das nicht... wenn ich ein anderes DIV im Vordergrund habe, warum ist das dann auch noch transparent?! Obwohl es ja eigentlich nichts mehr mit dem anderen zu tun hat? Und auch mit dem z-index gehts ja net...

        Dein Code (ausschnittsweise):

        <div id="loginform" style="... opacity: 0.85; z-index: 9;">

        <div style="... opacity: 2; z-index: 555;">
        <!-- ... -->
        </div>
        </div>

          
        Dein zweites `<div>`{:.language-html} hat sehr wohl mit dem "anderen" zu tun. Denn es ist ein Kindelement des ersteren `<div>`{:.language-html}s, womit sich die Eigenschaft `opacity`{:.language-css} an das zweite `<div>`{:.language-html} vererbt. Der `z-index`{:.language-css} hat damit im Übrigen nix zu tun.  
          
        Außerdem: `opacity`{:.language-css} kann keinen größeren Wert als 1 annehmen. Deine Zuweisung an das innere `<div>`{:.language-html} bleibt somit wirkungslos. Mit dem Wert "1" würde es immer noch bei "0.85" liegen, da dann 100% (zugewiesen) von 85% (vom Elternelement geerbt) gelten würde.  
          
        Tschö, Auge  
        
        -- 
        Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.  
        (Victor Hugo)  
          
        [Veranstaltungsdatenbank Vdb 0.1](http://termindbase.auge8472.de/)
        
        1. Hallo,

          Dein zweites <div> hat sehr wohl mit dem "anderen" zu tun. Denn es ist ein Kindelement des ersteren <div>s, womit sich die Eigenschaft opacity an das zweite <div> vererbt. Der z-index hat damit im Übrigen nix zu tun.

          Außerdem: opacity kann keinen größeren Wert als 1 annehmen. Deine Zuweisung an das innere <div> bleibt somit wirkungslos. Mit dem Wert "1" würde es immer noch bei "0.85" liegen, da dann 100% (zugewiesen) von 85% (vom Elternelement geerbt) gelten würde.

          Ja, das mit dem opacity:2 war nur testweise^^
          Nachdem es mit 1 nicht geklappt hat, dachte ich mir, dass 2 vielleicht sowas wie 200% heißen würde. (Habe ich ehrlich gesagt aber auch nicht geglaubt.)

          Wenn aber beim 2. div opacity:1; ist, funktioniert es ja auch nicht, obwohl die Vererbung damit ja sozusagen aufgehoben ist - bzw. keine Wirkung mehr hat.

          Und mit z-index habe ich ausprobiert, ob es geht, wenn das <div> über dem anderen liegt (was es aber ja eh schon tut.).

          Grüße,
          Willi

          1. Hi,

            Wenn aber beim 2. div opacity:1; ist, funktioniert es ja auch nicht, obwohl die Vererbung damit ja sozusagen aufgehoben ist

            Da ist der Denkfehler - es wird eben nicht vererbt: "Inherited: no". Also kann die Vererbung auch nicht aufgehoben werden, da sie ja gar nicht stattfindet.

            Wie Opacity funktioniert:

            Zitat: "Opacity can be thought of conceptually as a postprocessing operation. Conceptually, after the element (including its children) is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering." http://www.w3.org/TR/2003/CR-css3-color-20030514/#transparency

            cu,
            Andreas

            --
            Warum nennt sich Andreas hier MudGuard?
            Schreinerei Waechter
            O o ostern ...
            Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.