搜尋

首頁  >  問答  >  主體

嘗試在 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>
P粉083785014P粉083785014452 天前526

全部回覆(1)我來回復

  • P粉447002127

    P粉4470021272023-09-05 09:54:52

    正如Darkbee所說在評論中,只需按照他的twig fiddle更新您的樣式即可。沒有意識到你內嵌了 css 變數的範圍。

    回覆
    0
  • 取消回覆