Twig テンプレートの CSS 変数で背景画像を使用してみる
<p>そこで質問があります。 CSS変数で背景画像を使用したいのですが、プロジェクトではTwigを使用して、SQLリクエストを介してデータベースから選択された記事をループしています。各記事にはデータベース内の画像への相対リンクが付いているので、Web サイト上で見ることができます。 </p>
<p>問題は、データベースからの同じ画像リンクを記事の背景として使用したいことです。 </p>
<p>次のような CSS 変数を使用してみました: </p>
<pre class="ブラシ:css;ツールバー:false;">div.liste {
位置: 相対的;
ディスプレイ: フレックス;
背景画像: var(--image);
アニメーション: liste_Appearance .5s cubic-bezier(0.33, 1, 0.68, 1) 1 calc(var(--order) * 50ms) 逆方向;
/*休息は関係ありません*/
}
</pre>
<p>テンプレートでは次のようになります</p>
<pre class="brush:html;toolbar:false;">{% for produit in produit %}
{% 設定コンピューティング = コンプター 1 %}
<div class="liste" style="--order: {{ compteur }}; --image: {{ produit.image }}">
<img src="{{ produit.image }}">
</div>
{% 終了の %}
</pre>
<p>ご覧のとおり、ループするたびに上がる別の Twig 変数を使用しています。これは CSS と連動します (アニメーションは、変数「compteur」の数値を掛けた 50 ミリ秒だけ遅延します)。しかし、なぜそれが行われないのかわかりません。これは画像変数とは何の関係もありません...</p>
<p>また、{{ produit.image }} も画像を正しく表示するので、問題なく動作します。 </p>
<p>誰かが答えを持っている場合は、喜んで修正し、その人に感謝します。 </p>
