XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Halbtransparenter Hintergrund (http://xhtmlforum.de/showthread.php?t=37412)

haku 01.11.2005 21:14

Halbtransparenter Hintergrund
 
Hey Leute,
hab da nen kleines Problemchen mit halbtransparenten Hintergründen :ß

Hab nun nen Design bekommen was möglichst konform umgesetzt werden soll, geht schon ned so dolle, da halt transparenz mit im Spiel ist, doch das ist egal.
Umgesetzt werden muss es so oder so dn_smilie5.gif

Ich habe nen Div, indem der Hintergrund über filter: und -moz-opacity: auf die gewünschte Transparenz gebracht wurde.
Doch wie bekomme ich es nun hin, dass alles, was ich innerhalb dieses Divs packe, nicht mehr transparent ist.

Wenn ich dem drüberliegendem Element, sei es nun <div> oder sonst was, filter:alpha(opacity=100); bzw. -moz-opacity:100; setze, ist es recht egal ob ich es da stehen habe oder nicht. Der Hintergrund bleibt genauso transparent, wie er eigentlich nicht sein soll.

>klick<
HTML Part
Code:

  <div id="transbg">
          <div id="test">
    Hallo, ich bin ein test
          </div>
  </div>

CSS Part
Code:

#transbg {
        width:925px;
        margin:auto;
        background-repeat:repeat-y;
        background-image:url(img/bg_trans_bg.gif);
        /* make the shit transparent */
        -moz-opacity:0.11;
        filter:alpha(opacity=11);
        }

/* following content */
#transbg * {
        background-color:#ff0000;
  -moz-opacity:1;
        filter:alpha(opacity=100);
        font-size:36px;
        font-weight:bold;
        color:blue;
        }


haku 03.11.2005 20:17

*Ein einziger Schiebeversuch wenns nun ned klappt halt pech gehabt*
;)

Naja, für den IE habe ich mittlerweile zwar einen Workaround gefunden, jedoch leider nicht für den Fuchs und Rest :(
http://www.domedia.org/oveklykken/css-transparency.php für den IE Workaround

Sollte einer irgendeine Ahnung haben, wie das ganze auch im Fuchs+Rest zu umgehen ist, so bitte hilf mir :)

grüße, sam

ulle 03.11.2005 20:24

Tipp: Suchfunktion "opacity"

haku 03.11.2005 21:00

Naja dann sag mir mal in welchem Thread bitteschoen die Lösung steht, denn ich habe schon alle durch.

Gibt zwar die eine Methode mit :hover, welche mir auch bekannt ist, das bringt aber nichts, schließlich soll es ja die ganze Zeit sichtbar sein und nicht nur so lange, wie der User mit der Maus über der Box ist :ß

fricca 03.11.2005 21:08

Wie wär's mit halbtransparenten PNGs und für den IE deinen Workaround?

ulle 03.11.2005 23:14

Zitat:

Zitat von haku
Naja dann sag mir mal in welchem Thread bitteschoen die Lösung steht, denn ich habe schon alle durch.

Es gibt keine Lösung


Eine Idee hätte ich gerade, könnte man ja mal Testen:

Ein Container mit dem Inhalt (Text) und der Eigenschaft [background-color: transparent] und [position: relative], außerdem sind Size-Values notwendig.
Einen Child-Container mit der opacity-Eigenschaft und volle Breite/Höhe (100%) absolute positioniert. Danach die 2 Container mit z-index in der Reihenfolge vertauschen.

Also Containing Block mit z-index Switching ;)

haku 03.11.2005 23:21

Naja danke dir nochmals für deine Antwort, jedoch wirds nun genauso gemacht, wie es fricca vorgeschlagen hat.
!IE -> png
IE -> workaround position

Was nun mit anderen Browsern, Safari, etc ist, weis ich nicht. kenne diese einfach nicht :ß

snafu 06.11.2005 15:25

Hi haku :)

Hab dich die tage schonmal ueber ICQ angeschrieben.
Hat sich in Bezug auf Halbtransparenz und nicht transparentem Inhalt der div Box was ergeben?
Ausser die PNG, IE Workaroung lösung?

Gruß snafu

haku 06.11.2005 15:45

Nein und ich denke auch nicht, dass sich irgendwo etwas anderes finden wird.
Hoffe mal, dass ALLE Unternehmen und JEDER private Nutzer den IE7 benutzen wird, sobald er erscheint :)
Denn der unterstützt dann auch transparente PNG ;)

PS: Sry dassich mich über icq ned melde aber das spackt bei mir nur rum

snafu 06.11.2005 15:54

ja, die guten Browser hersteller erschweren uns doch alle nur das Leben :(

Schade das man früher - um bandbreite zu sparen - das rendering dem Browser überlassen hat und nicht dem Server.
So koennte jeder selbst entscheiden welche Engine er sich anpasst.

Naja - C'est la vie :)

Das Problem das der inhalt ebenfalls transparent angezeigt wird ist ja ebenfalls nicht im Sinne von CSS ( wenn die vererbung überschrieben wird ) also auch wieder ein Problem der Engine :/

Gruß snafu


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:53 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023