15问答网 > CSS里的background url增加多个背景图片怎么实现不了呢，求前辈解决？

CSS里的background url增加多个背景图片怎么实现不了呢，求前辈解决？

2025-05-20 16:30:18

推荐回答（4个）

回答1：

能不能用测试一下就知道了，准备两张图片01.jpg和02.jpg，大小都是100x100像素，完整代码如下：





#container { 
border-top: 10px solid #533336;
max-width: 200px; 
height:100px; 
overflow: hidden; 
position: relative;
background-image:url(01.jpg),url(02.jpg);
background-position:right top,left top;
background-repeat:no-repeat,repeat;

在浏览器中显示结果如图：

回答2：

效果其实是实现了的，但是你这个container元素的最大宽度为1920px，高度为500px，而两个图片的大小也是1920*500（根据图片文件名猜的），这样的话不管怎么排，两个图片都重叠了（第一个图片覆盖在第二个图片上），而jpg格式的图片是不透明的（只有gif和png的图片可实现透明），所以就看不到效果了。

回答3：

某天在做项目的时候遇到了一个问题，就是关于使用背景图片还是使用img图片合适点的问题。这个问题一直不太好说，各人有个人的用法习惯，也各有各的优点，我碰到的这个呢，就是在前人基础上做改版，这种情况就尽量减少页面代码的变动，达到自己想要的效果。还有一点img图片的话，会出现换行（当缩小屏幕的时候，宽度不够，自然就换行了，而background的话会出现重叠现象）的问题。所以自适应布局的时候还是需要好好考虑考虑这个问题的。
以下就是多个图片的具体用法，直接上代码，直观。
1
2
.personal_left>ul>li.personal_ess_infor{
background-color: #343A47;
background: url('images/camera.png') no-repeat 0.2rem center,
url('images/btn_arrow1.png') no-repeat right .16rem center;
background-size: .2rem .16rem,.16rem .16rem;
box-shadow: inset 0 -1px 0 0 #262D3D;
}

回答4：

直接加图片
背景加 background-image:url（../images/??.gif）