[CSS/PHP] Vordefinierte Styles?

[Peter]

Hallo zusammen,

ich möchte folgendes machen:
ich habe ein style-sheet mit bspw. folgender Klasse:

.xyz { background: linear-gradient(rgba(236,240,241,1.0) 10%, rgba(236,240,241,0.2) 100%), url('image.jpg'); }

in meiner php/html-Datei binde ich die Klasse wie folgt ein:

<element class="xyz">

Das funktioniert!

ich würde aber gerne in einer Auflistung jeweils ein anderes Hintergrundbild verwenden.
Da die Klasse xyz insgesamt wesentlich umfangreicher ist wie in diesem Beispiel, ist es keine Option die gesamte Klasse immer wieder in den style-tag des html-elements zu schreiben.

Vielmehr stelle ich mir vor, dass ich eine Kombination wie folgt erstellen kann:

<element style="background: xyz;<?php print($image);?>">

Ich möchte also einen Hintergrund aus vordefinierten und einem dynamisch erzeugten Element bilden.

Gruss,
Peter

 

[Snooty]

style="xyz"? Das sollte doch class="xyz" heißen.

Und dann kannst du zusätzlich noch ein dynamischen style="background-image:url(<?php ... ?>.jpg)" angeben.

Das image kannst du in der Klasse ja dann auch weglassen.

 

[Peter]

Korrekt, danke, habs korrigiert.

Ich kann natürlich zusätzlich zum class- noch den style-tag unterbringen.

Was ich aber nicht weiss ist, wie ich den dynamischen Style mit dem vordefninierten verheirate.
Wen ich also in der css-Datei das Attribut "background" mit bspw. einem Verlauf belegt habe, überschreibe ich das mit dem dynamisschen style-Attribut "background" und einem Hintergrundbild wieder.

Daher meine Frage wie ich das kombinieren kann.

Ich hätte aber gerne den Verlauf aus der css-Datei und das Hintergrundbild aus der html-Datei.

 

[Hancock]

Willst du das Hintergrundbild mit einem Gradienten überlagern oder miteinander verrechnen?
Es gibt die CSS3-Variante mit multiple-Backgrounds als eine Kommagetrennte Liste.
Ein Gradient drüberlegen sollte dann auch gehen:

background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); http://stackoverflow.com/questions/...d-image-and-css3-gradient-on-the-same-element

 

[T0a5tbr0t]

Verschiedene CSS Eigenschaften kann man nicht einfach mischen. Letztendlich muss eine eindeutige "background" Eigenschaft gelten. Wenn man sehr viele bekannte Bilder hat, kann man das CSS halt automatisch generieren. Die eine background-Eigenschft ist ja nicht sooo schlimm. Man kann die restlichen Eigenschaften einfach in eine Klasse herausziehen.
Wenn sich die Bilder ändern, wirkt es mehr wie Content. Dann sollte man <img> nehmen.

Vielleicht kann man mit CSS Custom Properties ("Variablen") irgendwas tricksen. Würde halt nur in modernen Browser gehen.

background-color-image: url("IMAGE_URL"), var(--bg-gradient);