多个 content:url 图片

Question

我正在尝试使用 CSS 将多个图像添加到一个页面。我用这种方式而不是用 'straight forward' 的方式来确保移动兼容性（它允许我为图像设置百分比宽度，这样我就可以让它们在移动设备上以正确的尺寸显示）。

我目前的样式表中有：

div.image {
content:url(http://example.com/example-image1.jpg);
width:100%
}

div.image2 {
content:url(http://example.com/example-image2.jpg);
width:25%
}

然后再放几张图片。然后在我页面的某些部分：

<div class="image">

</div>

<div class="image2">

</div>

我遇到的问题是 content:url 似乎只在第一个实例中起作用，那是唯一显示的图片。多个 div.s 似乎不是问题，就好像我将第二个 div 设置为与第一个 div 相同的 content:url 图像一样，该图像确实显示两次。

抱歉，如果这是一个 dumb/noob 问题...我找不到答案。

Answer 1

您忘记了一个括号：

div.image2{
   content:url(http://example.com/example-image2.jpg);
   width:25%
}

编辑：我尝试使用支架并且它起作用了。我使用 Mozilla Firefox 版本 58。

多个 content:url 图片

Multiple content:url Images

html

css

mobile

responsive