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

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

但是您可以使用position:absolute CSS属性创建2 div。背景div为z-index:1;，内容div为z-index:2

就像那样：https://jsfiddle.net/qxo8q2hn/2/

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

...

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

Answer 3

既然你知道你想要的图像有多宽，你可以做多个背景图像并设置距离，但你必须给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;    
}

这里是fiddle

Answer 4

您可以使用background-image:url(...), url(...), ...将多个背景图像用作css属性。

示例HTML：

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

使用CSS（3张图片）：

#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;
}

请参阅更改jsfiddle的结果。适合我在Chrome和Firefox中使用。

浮动图像作为背景 - css

4 个答案: