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>