Twig 템플릿에서 CSS 변수와 함께 배경 이미지를 사용해 보세요.

Question

그래서 질문이 있습니다. CSS 변수와 함께 배경 이미지를 사용하고 싶습니다. 내 프로젝트에서는 Twig를 사용하여 SQL 요청을 통해 내 데이터베이스에서 선택된 기사를 반복하고 있습니다. 각 기사에는 데이터베이스의 이미지에 대한 상대 링크가 있으므로 웹사이트에서 볼 수 있습니다.

문제는 데이터베이스의 동일한 이미지 링크를 기사 배경으로 사용하고 싶다는 것입니다.

다음과 같은 CSS 변수를 사용해 보았습니다.

div.liste {
        위치: 상대;
        디스플레이: 플렉스;
        배경 이미지: var(--image);
        애니메이션: liste_appear .5s 입방 베지어(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" 변수가 있는 숫자를 곱하여 50ms만큼 지연됩니다). 그런데 왜 이렇게 되지 않는지 모르겠습니다. 이미지 변수와는 아무런 관련이 없습니다...

또한 {{ produit.image }}는 이미지를 올바르게 표시하므로 제대로 작동합니다.

누군가 답변이 있는 경우 기꺼이 수정하고 감사 인사를 전하겠습니다!

Answer 1

Darkbee가 댓글에서 말했듯이 그의 나뭇가지 바이올린을 따라 스타일을 업데이트하세요. CSS 변수에 대한 인라인 범위가 있다는 것을 몰랐습니다.