在Twig模板中使用CSS变量设置background-image遇阻求助

问题出在CSS变量的赋值格式不符合background-image的语法要求：

background-image需要接收url(图片路径)格式的值，但你直接把图片链接赋值给--image变量，导致最终渲染的CSS变成background-image: 你的图片链接，这是无效的语法。而--order是数字类型，直接赋值就能被CSS正确解析，所以动画延迟正常工作。

修正方案 #

修改Twig模板中--image变量的赋值，给图片链接加上url()包裹：

{% for produit in produit %}
{% set compteur = compteur + 1 %}
<div class="liste" style="--order: {{ compteur }}; --image: url('{{ produit.image }}')">
    <img src="{{ produit.image }}">
</div>
{% endfor %}

你的CSS代码不需要修改，保持原样即可：

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

这样渲染后，每个.liste元素的--image变量会被解析为url('相对链接')，background-image: var(--image)就能正确加载背景图了。

内容的提问来源于stack exchange，提问作者Xupix