Zwei Background-Images übereinander

[BRotondi]

(Weiterführung von zwei background-images übereinander, 2008 )

div#Navigation {
background-image:url(images/navibark.gif); background-repeat: repeat-y;
}
div#Navigation table {
background-image:url(images/navispace.gif); background-repeat: repeat-y;
}

bietet interessante Möglichkeiten. Wie geht Ihr vor, wenn Ihr z.B. für ein Pulldown den Pfeil benötigt, und einen weissen Hintergrund um die Schrift lesbarer zu gestalten?

Meine Lösung analog oben: Z.B. ein sonst überflüssiges <span> um's <a>.

Gibt es eine clevere Möglichkeit um beide Background ins selbe Element zu kriegen und sich den <span> oder ein separates <img> zu sparen?

Meines Wissens nicht, habe hier aber schon viel "unmögliches" gelernt :).

 

[mermshaus]

Gibt es eine clevere Möglichkeit um beide Background ins selbe Element zu kriegen und sich den <span> oder ein separates <img> zu sparen?

Mit CSS2 generell nicht, mit CSS3 offenbar ja.

- Multiple backgrounds with CSS3 - CSS3 . Info

Du kannst allerdings ein Bild und eine Farbe setzen. Das ist bekannt, oder?

background: #fff url('eisbaer.jpg') no-repeat top left;

Wenn du <img> sagst, bist du eigentlich nicht mehr bei background-image. ;) Also, es hängt vielleicht auch ein wenig davon ab, was du genau darstellen möchtest, also ob das Element wirklich nur "Verzierung" ist und keinen inhaltlichen Zweck erfüllt.

 

[BRotondi]

Habe mich gleich ein bisschen durch CSS3 gelesen. Klingt interessant! Soweit ich das verstehe, könnte ich das aber aktuell nicht für mein vBulletin verwenden, oder?

Zur Hintergrundfarbe: Gibt es eine Möglichkeit oder einen Trick, mit Transparenzen zu arbeiten? Ich würde z.B. gerne ein 80% Weiss verwenden, damit der Hintergrund noch durchschimmert. Opacity demgegenüber setzt die Transparenz gleich für's ganze Element.

 

[mermshaus]

Quasi dieselbe Antwort: Geht mit CSS3, ansonsten eher nicht.

- RGBA colors - CSS3 . Info

Ich habe mich noch nicht wirklich damit beschäftigt, welche Browser welche CSS3-Eigenschaften wie unterstützen. Aber die Unterstützung im IE ist noch so schlecht, dass man im Grunde davon ausgehen kann, dass ein CSS3-Effekt dort bis einschließlich IE8 nicht zu sehen sein wird. Viele Leute sagen: Egal, dann sieht es dort halt nicht ganz so hübsch aus. -- Ich baue die Effekte lieber noch mit Grafiken nach. In deinem Fall würde ich eine 80 % undurchsichtige weiße Grafik erstellen und als Hintergrundbild setzen. Notfalls auch mit zusätzlichem Rahmenelement.

 

[BRotondi]

Merci für Deine Hinweise! Werde mit CSS3 ebenfalls noch warten.

Edit: Wobei... gerade bei kleinen Dingen macht es vielleicht doch Sinn. Analog -moz-border-radius :). Habe es eh aufgegeben alles in allen Browsern perfekt aussehen zu lassen. Design soll auch Spass machen und zum neues ausprobieren anregen, ohne dann stundenlang zu perfektionieren. (und ausserdem wird z.B. rgba schon recht breit unterstützt)

=> Somit: 1000 Dank! Der Thread hat sich gelohnt, "auf zu neuen Abenteuern!" [und neuen Problemen]

 

[BRotondi]

Habe nun weiter rumgespielt, gelesen etc. und versucht folgende neue Idee zu realisieren:

.rot {background=url(rot.png);}
.gelb {background=url(gelb.png);}

Ein <span class="rot gelb">Test</span> soll orange ergeben. Auf diese Weise funktioniert das natürlich nicht, da die ganze Background-Einstellung überschrieben wird. Ist dies mit CSS3 nicht irgendwie möglich? (Glaub effektiv nicht, zumindest keinen Hinweis gefunden).

P.S. MSIE:

• Beim Multibackground ärgerlich: MSIE stellt gleich gar keinen mehr dar. Wäre natürlich schön gewesen, wenigstens der erste würde dargestellt und die nachfolgenden wären quasi als Firefox-"Pünktchen auf's i" einsetzbar.
• RGBA wird schön unterstützt.