Javascript 浮动图像左作为背景-css

我有这个html：

<style>
#todo{
display:table;
border:1px solid #000;
}

.divimg{
float: left; 
height: 100px; 
margin-right: 0px; 
margin-bottom: 0px;
}
</style>

<div id=todo>
<img class=divimg src=https://40.media.tumblr.com/2292c0583894cd27ef887ca431e4cc40/tumblr_mkjw8oi7vb1s5jt7zo1_500.jpg></img>
<img class=divimg src=http://36.media.tumblr.com/tumblr_m6pvhwHP2O1rp9ko0o1_500.jpg></img>
<img class=divimg src=http://data.whicdn.com/images/48891103/tumblr_mghlgh66It1r0i9t4o1_500_large.png></img>
<img class=divimg src=http://www.ladylaike.com.br/blog/wp-content/uploads/2014/01/beach-summer-tumblr.jpg></img>
<img class=divimg src=https://41.media.tumblr.com/bdc50942adb5463db541bc77fcecede2/tumblr_n5mkb0CXlV1s7s4cuo2_500.jpg></img>
<img class=divimg src=https://40.media.tumblr.com/2292c0583894cd27ef887ca431e4cc40/tumblr_mkjw8oi7vb1s5jt7zo1_500.jpg></img>
<img class=divimg src=http://36.media.tumblr.com/tumblr_m6pvhwHP2O1rp9ko0o1_500.jpg></img>
</div>

---

我的问题是，我想要的结果与我在这方面的结果相同，但是在背景中使用图像，而不是img标签。可能吗？我该怎么做呢？

我认为你不能在背景上添加多个带有浮动属性的图像

但您可以使用position:absoluteCSS属性创建2个div。z指数为1的背景div；和具有z索引的content div:2

---

像这样：

使用div标记而不是img标记。将显示更改为内联块，并使用背景大小控制其大小

<div id=todo>
    <div class='div-img1 divimg'></div>
    <div class='div-img1 divimg'></div>
    <div class='div-img1 divimg'></div>
    <div class='div-img1 divimg'></div>
    <div class='div-img2 divimg'></div>
</div>

---

因为你知道你想要多宽的图像，你可以做多个背景图像，只需设置距离，但你必须给div一些高度和宽度，否则它就会崩溃

div {
    height: 300px;
    width: 300px;
    background-image: url(“https://40.media.tumblr.com/2292c0583894cd27ef887ca431e4cc40/tumblr_mkjw8oi7vb1s5jt7zo1_500.jpg”), url(“http://36.media.tumblr.com/tumblr_m6pvhwHP2O1rp9ko0o1_500.jpg”), url(“http://data.whicdn.com/images/48891103/tumblr_mghlgh66It1r0i9t4o1_500_large.png”);
    background-size: 100px auto, 100px auto, 100px auto;
    background-position: 0 0, 100px 0, 200px 0;
    background-repeat: no-repeat;    
}

---

这里有一个

您可以使用多个背景图像作为背景图像的css属性：url…，url

HTML示例：

<div id="todo">
    Example Text.
    Example Text.
    Example Text.
    Example Text.
</div>

---

有关结果，请参见更改。我可以在Chrome和Firefox中使用。

在你想要作为背景的ID上使用css背景图像。但是你可以在这里手动设置所有背景图像的位置，这不是浮动谢谢。但在这个例子中，我不能有不同宽度的图像。。。我希望它们有相同的高度，但不是宽度。我想用背景我不能有这个，对吗？你可以通过调整每个图像的背景大小和背景位置来获得不同的宽度，见第一个图像宽度：50px，第二个：100px，第三个：400px耶！我想要更多的dinamic，因为我将有不同的图像，PHP将带来和每个图像有不同的高度和宽度。但你在这里手动设置所有背景图像的位置，这不是浮动真的！没有浮动。由于这个原因，这实际上只是一个局部解决方案，但由于她似乎希望它们都具有相同的宽度，所以应该很容易实现。它几乎像一个反向精灵。耶！我想要更多的dinamic，因为我将有不同的图像，PHP将带来和每个图像有不同的高度和宽度。谢谢。但在这个例子中，我不能有不同宽度的图像。。。我希望它们有相同的高度，但不是宽度。我想我不能有这样的背景，可以吗？

<div id="todo">
    Example Text.
    Example Text.
    Example Text.
    Example Text.
</div>

#todo {
    margin:5px;
    padding:50px 0px 0px 0px;
    border:1px solid black;
    height:500px; 
    width:1000px;
    background-repeat:no-repeat;
    background-image:url("https://40.media.tumblr.com/2292c0583894cd27ef887ca431e4cc40/tumblr_mkjw8oi7vb1s5jt7zo1_500.jpg"),
        url("http://36.media.tumblr.com/tumblr_m6pvhwHP2O1rp9ko0o1_500.jpg"),
        url("http://data.whicdn.com/images/48891103/tumblr_mghlgh66It1r0i9t4o1_500_large.png");
    background-size:50px 50px;
    background-position:0px 0px, 50px 0px, 100px 0px;
}