尝试在 Twig 模板中使用带有 css 变量的背景图像
P粉083785014
P粉083785014 2023-09-04 12:41:18
[CSS3讨论组]
<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 %} &lt;div class=&quot;liste&quot; style=&quot;--order: {{ compteur }}; --image: {{ produit.image }}&quot;&gt; &lt;img src=&quot;{{ produit.image }}&quot;&gt; &lt;/div&gt; {% endfor %} </pre> <p>正如你所看到的,我正在使用另一个 Twig 变量,它每次循环时都会上升,并且它与 css 一起工作(动画延迟了 50ms 乘以变量“compteur”所在的数字),但我不知道为什么它不这样做与图像变量无关...</p> <p>而且,{{ produit.image }} 可以正常工作,因为它可以正确显示图像。</p> <p>如果有人有答案,我们很乐意修复并感谢这个人!</p>
P粉083785014
P粉083785014

全部回复(1)
P粉447002127

正如Darkbee所说在评论中,只需按照他的twig fiddle更新您的样式即可。没有意识到你内嵌了 css 变量的范围。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号