浮动图像左作为背景-css

float image left as background - css

本文关键字：背景 -css 图像      更新时间：2023-09-26

我有这个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标签。有可能吗？我该怎么做？

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

您可以使用多个背景图像作为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。

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

这是一个小提琴

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

但是您可以使用position:absoluteCSS属性创建2个div。带有z-index:1;的背景div和带有z-index:2 的内容div

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

相关文章：