Versuchen Sie, ein Hintergrundbild mit CSS-Variablen in der Twig-Vorlage zu verwenden

Question

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.

Das Problem ist, dass ich denselben Bildlink aus der Datenbank als Artikelhintergrund verwenden möchte.

Ich habe versucht, eine CSS-Variable wie diese zu verwenden:

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*/
}

Dann sieht es in der Vorlage so aus

{% für Produkt in Produkt %}
{% set compteur = compteur + 1 %}
<div class="liste" style="--order: {{ compteur }} --image: {{ produit.image }}">
    <img src="{{ produit.image }}">
</div>
{% endfor %}

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...

Außerdem funktioniert {{ produit.image }} einwandfrei, da das Bild korrekt angezeigt wird.

Wenn jemand eine Antwort hat, würden wir uns freuen, das Problem zu beheben und dieser Person zu danken!

Answer 1

正如Darkbee所说在评论中，只需按照他的twig fiddle更新您的样式即可。没有意识到你内嵌了 css 变量的范围。