javascript - float 图像留作背景 - css

Question

我有这个 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>

https://jsfiddle.net/v5wj21c5/

我的问题是，我想要的结果和我在这里得到的结果一样，但背景是图片，而不是 img 标签。是否可以？我该怎么做？

Answer 1

使用 div 标签代替 img 标签。将显示更改为内联 block 并使用背景大小控制其大小。

<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>

...

<style>
#todo{


border:1px solid #000;
}

.divimg{
display:inline-block;
height: 100px; 
width:100px;
background-size:100px 100px;
margin-right: 0px; 
margin-bottom: 0px;
}

.div-img1 {
    background-image:url('https://40.media.tumblr.com/2292c0583894cd27ef887ca431e4cc40/tumblr_mkjw8oi7vb1s5jt7zo1_500.jpg');
}

.div-img2 {
    background-image:url('http://36.media.tumblr.com/tumblr_m6pvhwHP2O1rp9ko0o1_500.jpg');
}

</style>

https://jsfiddle.net/v5wj21c5/22/