html - 向 HTML 中的类动态添加属性

Question

我有这些 css 类:

planning a span.icon {
    background-image:url(../img/icon1.png);
    background-position:left top;
    background-repeat:no-repeat;

.planning a:hover span.icon {
    background-position: left bottom;
}

在我的模板中，我想循环一个元素 (blurb) 并动态更新属性 background-image 的值。

目前，我尝试从 css 类中删除 background-image 并将其添加到模板中但没有成功:

{% for blurb in page.homepage.blurbs.all %}
    <div class="span4">
    <a href={{ blurb.link }}>
    <span class="img_icon icon" style="background-image: {% static blurb.icon %}"></span>
       </a>
     </div>
{% endfor %}

结果是 background-image 属性未归因于类图标。

有什么办法吗？

Answer 1

您缺少图像 URL 周围的 url()。

<span class="img_icon icon" style="background-image: url({% static blurb.icon %})"></span>

应该工作(如果 blurb.icon 当然是一个 URL，如果它是一个 ImageField 值，你必须使用 blurb.icon.url).