XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Runde Ecken mit Hintergrund (http://xhtmlforum.de/showthread.php?t=62265)

Phil2812 04.09.2010 18:14

Runde Ecken mit Hintergrund
 
Hallo liebe Community!
Ich bin am Verzweifeln. Ich habe schon mehrere Stunden versucht mein Problem zu Lösen.
Bei meiner jetzigen "Lösung" verwende ich Grafiken mit Transparenz als Ecken.
Allerdings scheint die Hintergrundfarbe vom darunterliegenden div (und nicht das Hintergrundbild der Seite) durch.

Zum besseren Verständnis:
Seitenschema
Ecke
und die Ecke, wie sie wirklich aussieht:
Ecke in der Praxis

Wie man sieht, scheint die graue Farbe (bei der es sich übrigens um ein Bild handelt, das in alle Richtungen wiederholt wird) des "Wrappers" durch und nicht der Hintergrund (weiß/rosa/pink).

Dass die Ecken so dunkel sind liegt daran, dass sowohl der Wrapper als auch die Ecken leicht transparent sind.
Eigentlich haben die Ecken die gleiche Farbe wie der Wrapper.

Vielen Dank im Voraus für mögliche Lösungsansätze!
(Bitte keine Lösungsvorschläge mit Javascript.)

Edit: Der relevante Code:
Code:

.corner-top-left {
        background: url("{T_THEME_PATH}/images/corner-top-left.png") transparent no-repeat top left;
        z-index: 2;
}

.corner-top-right {
        background: url("{T_THEME_PATH}/images/corner-top-right.png") transparent no-repeat top right;
        z-index: 2;
}

.corner-bottom-left {
        background: url("{T_THEME_PATH}/images/corner-bottom-left.png") transparent no-repeat bottom left;
        z-index: 2;
}

.corner-bottom-right {
        background: url("{T_THEME_PATH}/images/corner-bottom-right.png") transparent no-repeat bottom right;
        z-index: 2;
}

#wrap-outer {
        margin: 0 auto;
        width: 1100px;
        padding: 0 20px;
        z-index: 0;
        background-color: transparent;
}

#wrap {
        width: 1060px;
        padding: 0 20px;
        background: url("{T_THEME_PATH}/images/bg.png") repeat;
        z-index: 1;
}

und im Template

HTML-Code:

<div id="wrap-outer">
                    <div class="corner-top-left">
                    <div class="corner-top-right">
                    <div class="corner-bottom-left">
                    <div class="corner-bottom-right">
<div id="wrap">
...
</div>
</div></div></div></div>
</div>



Alle Zeitangaben in WEZ +2. Es ist jetzt 13:47 Uhr.

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

© Dirk H. 2003 - 2023