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()。

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

应该有效（如果blurb.icon当然是一个网址，如果是ImageField值，则必须使用blurb.icon.url）。

动态地将属性添加到HTML中的类

1 个答案: