Versuchen Sie, ein Hintergrundbild mit CSS-Variablen in der Twig-Vorlage zu verwenden
<p>Ich habe also eine Frage. Ich möchte ein Hintergrundbild mit einer CSS-Variablen verwenden und verwende in meinem Projekt Twig, um die Artikel zu durchlaufen, die über eine SQL-Anfrage aus meiner Datenbank ausgewählt werden. Jeder Artikel verfügt über einen relativen Link zum Bild in der Datenbank, sodass es auf der Website angezeigt werden kann. </p>
<p>Das Problem ist, dass ich denselben Bildlink aus der Datenbank als Artikelhintergrund verwenden möchte. </p>
<p>Ich habe versucht, eine CSS-Variable wie diese zu verwenden: </p>
<pre class="brush:css;toolbar:false;">div.liste {
Position: relativ;
Anzeige: Flex;
Hintergrundbild: var(--image);
Animation: liste_appear .5s Kubikbezier(0.33, 1, 0.68, 1) 1 calc(var(--order) * 50ms) rückwärts;
/*Ruhe ist egal*/
}
</pre>
<p>Dann sieht es in der Vorlage so aus</p>
<pre class="brush:html;toolbar:false;">{% für Produkt in Produkt %}
{% set compteur = compteur + 1 %}
<div class="liste" style="--order: {{ compteur }} --image: {{ produit.image }}">
<img src="{{ produit.image }}">
</div>
{% endfor %}
</pre>
<p>Wie Sie sehen können, verwende ich eine andere Twig-Variable, die bei jeder Schleife hochgeht und mit CSS funktioniert (die Animation wird um 50 ms verzögert, multipliziert mit der Zahl, in der sich die Variable „compteur“ befindet). aber ich weiß nicht, warum das nicht funktioniert. Das hat nichts mit der Bildvariablen zu tun...</p>
<p>Außerdem funktioniert {{ produit.image }} einwandfrei, da das Bild korrekt angezeigt wird. </p>
<p>Wenn jemand eine Antwort hat, würden wir uns freuen, das Problem zu beheben und dieser Person zu danken! </p>
