嘗試在 Twig 模板中使用帶有 css 變數的背景圖像
<p>所以我有一個問題。我想將背景圖像與 css 變數一起使用,並且在我的專案中,我使用 Twig 循環顯示文章,這些文章是透過 sql 請求從我的資料庫中選擇的。每篇文章都有資料庫中圖片的相對鏈接,因此可以在網站上看到。 </p>
<p>問題是,我想使用資料庫中與文章背景相同的圖像連結。 </p>
<p>我嘗試使用這樣的 css 變數:</p>
<pre class="brush:css;toolbar:false;">div.liste {
position: relative;
display: flex;
background-image: var(--image);
animation: liste_appear .5s cubic-bezier(0.33, 1, 0.68, 1) 1 calc(var(--order) * 50ms) backwards;
/*rest doesn't matter*/
}
</pre>
<p>然後,在模板中,它看起來像這樣</p>
<pre class="brush:html;toolbar:false;">{% for produit in produit %}
{% set compteur = compteur 1 %}
<div class="liste" style="--order: {{ compteur }}; --image: {{ produit.image }}">
<img src="{{ produit.image }}">
</div>
{% endfor %}
</pre>
<p>正如你所看到的,我正在使用另一個Twig 變量,它每次循環時都會上升,並且它與css 一起工作(動畫延遲了50ms 乘以變量“compteur”所在的數字),但我不知道為什麼它不這樣做與圖像變數無關...</p>
<p>而且,{{ produit.image }} 可以正常運作,因為它可以正確顯示圖片。 </p>
<p>如果有人有答案,我們很樂意修復並感謝這個人! </p>