Question

我有一个div类.event，它应该有一个背景图像（该类的每个实例都有不同的图像）。但是，每次添加此类的div时，我都不想编辑CSS。我只想编辑HTML，HTML5的目标是将样式与内容分开。

HTML：

<div class="event" id="meeting1">
  <img src="img/DSC_0001.jpg">
  <span>Mon 19 Oct</span>
</div>
<div class="event" id="bookSale">
  <img src="img/DSC_0004.jpg">
  <span>Wed 21 Oct</span>
</div>
...

Answer 1

为什么不直接勾勒出造型？

<div class="event" id="meeting1" style="background-image: url(img/DSC_0001.jpg)">
  <span>Mon 19 Oct</span>
</div>
<div class="event" id="bookSale" style="background-image: url(img/DSC_0004.jpg)">
  <span>Wed 21 Oct</span>
</div>

在某些情况下，内联样式是不受欢迎的，但在这种情况下，我认为它是合适的。

Answer 2

我使用jQuery想出了一种polyfill。它使用.each()查找<img> div中的每个.event元素并隐藏它，并将背景图像添加到CSS中。

<强> JavaScript的：

$(document).ready(function() {

    $(".event img:first").each(function(index) {

        var src = $(this).attr("src");
        var eventCal = $(this).parent();

        event.css("background", "url(" + src + ") center center/cover no-repeat");
        $(this).hide();
    });
});

这有两次（理论上）不下载图像的好处，因为它们应该已经被缓存了。

Answer 3

$(".event img").each(function(index) {
    var src = $(this).attr("src");
    var eventCal = $(this).parent();

    eventCal.css("background", "url(" + src + ") center center/cover no-repeat");
    $(this).hide();
});

我有正确的变量错误。

将<img/>替换为父元素的CSS背景图像（使用jQuery将样式与内容分开）

3 个答案: