Twig テンプレートの CSS 変数で背景画像を使用してみる

Question

そこで質問があります。 CSS変数で背景画像を使用したいのですが、プロジェクトではTwigを使用して、SQLリクエストを介してデータベースから選択された記事をループしています。各記事にはデータベース内の画像への相対リンクが付いているので、Web サイト上で見ることができます。

問題は、データベースからの同じ画像リンクを記事の背景として使用したいことです。

次のような CSS 変数を使用してみました:

div.liste {
        位置: 相対的;
        ディスプレイ: フレックス;
        背景画像: var(--image);
        アニメーション: liste_Appearance .5s cubic-bezier(0.33, 1, 0.68, 1) 1 calc(var(--order) * 50ms) 逆方向;
        /*休息は関係ありません*/
}

テンプレートでは次のようになります

{% for produit in produit %}
{% 設定コンピューティング = コンプター 1 %}
<div class="liste" style="--order: {{ compteur }}; --image: {{ produit.image }}">
    <img src="{{ produit.image }}">
</div>
{% 終了の %}

ご覧のとおり、ループするたびに上がる別の Twig 変数を使用しています。これは CSS と連動します (アニメーションは、変数「compteur」の数値を掛けた 50 ミリ秒だけ遅延します)。しかし、なぜそれが行われないのかわかりません。これは画像変数とは何の関係もありません...

また、{{ produit.image }} も画像を正しく表示するので、問題なく動作します。

誰かが答えを持っている場合は、喜んで修正し、その人に感謝します。

Answer 1

Darkbee がコメント で と言っているように、彼の小枝フィドルに従ってスタイルを更新してください。 CSS変数のインラインスコープがあることに気づきませんでした。