Hintergrundbild hinzufügen statt ersetzen?

[TSO]

Hi,

mit CSS ist es ja möglich einem Element mehrere Hintergrundbilder zu geben, wenn man diese bei der background(-image) Eigenschaft hintereinander auflistet.

Lässt sich das auch auf mehrere Selektoren ausdehnen?

Also ich würde gerne in etwa folgendes erreichen:
<div class="background1 background2 background 3">

Und in jeder dieser Klassen ein bestimmtes Hintergrundbild an einer bestimmten Stelle definieren. Das Element soll dann alle diese Hintergrundbilder haben.
Bisher konnte ich es nur erreichen maximal eines der Hintergrundbilder angezeigt zu bekommen.

[molily]

Hallo,

Und in jeder dieser Klassen ein bestimmtes Hintergrundbild an einer bestimmten Stelle definieren. Das Element soll dann alle diese Hintergrundbilder haben.

Nein, das ist nicht möglich. Die letzte background-image-Angabe wird die vorherigen überschreiben, sie werden nicht automatisch aggregiert.

So etwas ist höchstens mit einem CSS-Präprozessor wie Sass oder Less möglich. Damit ließe sich eine Logik programmieren, die aus mehreren Angaben letztlich *eine* background-image-Deklaration erzeugt. Das muss dann aber CSS-seitig passieren.

Mathias

[Matthias Apsel]

Om nah hoo pez nyeetz, molily!

So etwas ist höchstens mit einem CSS-Präprozessor wie Sass oder Less möglich.

Ohne Präprozessor lassen sich die Klassen auch kombinieren. Wenn die Anzahl der Klassen überschaubar bleibt.

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Matthias Apsel!

So etwas ist höchstens mit einem CSS-Präprozessor wie Sass oder Less möglich.

Ohne Präprozessor lassen sich die Klassen auch kombinieren. Wenn die Anzahl der Klassen überschaubar bleibt.

siehe http://wiki.selfhtml.org/wiki/CSS/Selektoren/Klassenselektor

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Ohne Präprozessor lassen sich die Klassen auch kombinieren. Wenn die Anzahl der Klassen überschaubar bleibt.

„Überschaubar“ heißt wohl nicht größer als 3. Für n Klassen braucht man 2^n-1 Regeln.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

„Überschaubar“ heißt wohl nicht größer als 3.

Ja. Vielleicht auch noch 4

Für n Klassen braucht man 2^n-1 Regeln.

Nein.
1 → 1
2 → 3
3 → 7
4 → 15
5 → 31
6 → 63

[latex]\sum _{k=1}^{n}{\left(\begin{matrix}n\k\end{matrix}\right)}[/latex]

[Ich weiß nicht, ob das Latex irgendwann angezeigt wird: Summe von k=1 bis n über (n über k)]

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Für n Klassen braucht man 2^n-1 Regeln.
Nein.

Äh, doch.

1 → 1
2 → 3
3 → 7
4 → 15
5 → 31
6 → 63

Sag ich doch, 2^n-1.

[latex]\sum _{k=0}^{n}{\left(\begin{matrix}n\k\end{matrix}\right)}=2^n[/latex]

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Für n Klassen braucht man 2^n-1 Regeln.
Nein.

Äh, doch.

Ja, natürlich. Ich hatte n^2 gelesen.

Matthias

[Gunnar Bittersmann]

@@molily:

nuqneH

So etwas ist höchstens mit einem CSS-Präprozessor wie Sass oder Less möglich.

Ob man die Regeln nun händisch schreibt oder vom Präprozessor generieren lässt: es sind und bleiben 2ⁿ − 1 Regeln.* Bereits mit 12 Klassen stößt man an die Grenze von IE ≤ 9.

Vielleicht muss man hier doch mit JavaScript ran:

Entweder dos DOM umfrickeln und aus

<div class="multiple-backgrounds background1 background2 background3">  
  content  
</div>

sowas machen (unschön):

<div class="multiple-backgrounds">  
  <div class="background1">  
    <div class="background2">  
      <div class="background3">  
        content  
      </div>  
    </div>  
  </div>  
</div>

oder für alle Elemente der Klasse multiple-backgrounds die Hintergrundbilder per JavaScript setzen.

Die Klassen multiple-backgrounds, background1, background2, background3, … sollten natürlich semantisch, nicht präsentationsbezogen benannt sein.

Qapla'

* Jetzt mit den richtigen Zeichen. Man sehe mir ^ und - nach; auf einem Android-Smartphone ist es eine Herausforderung, _irgendwas_ zu tippen.