三张图片加入一个DIV作为背景，但是图片重合了

三张图片加入一个DIV作为背景，但是图片重合了，怎么让背景图片上下排列，position调整，3张都调整了，还是重合的，请问怎么解决？

慕慕6295533 2018-02-06

源自：CSS3背景与渐变 2-18 编程练习

收起

2回答

好帮手慕糖回答被采纳获得+3积分 2018-02-06 14:04:12

你好，1、background-image属性只是为元素设置背景图像，不能添加位置，所以建议，这里可直接使用background。

2、高度时不够的，一张图片的高度时90，那存放三张的话，需要270px。例：

祝学习愉快~

收起回答

好帮手慕糖 2018-02-06 11:48:37

你好，可参考如下进行设置，如果还是不行，建议：把你的代码粘贴过来，便于大家测试与解决问题。

background: url("http://img1.sycdn.imooc.com/climg//582c3b780001a95103000090.jpg") no-repeat,
        url("http://img1.sycdn.imooc.com/climg//582c3b6d0001197603000090.jpg") 0 110px no-repeat,
        url("http://img1.sycdn.imooc.com/climg//582c3b61000122dd03000090.jpg") 0 220px no-repeat;

祝学习愉快~

收起回答

提问者慕慕6295533 #1

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>background-image</title> <style type="text/css"> /*此处写代码*/ div{ width: 300px; height: 190px; border: 5px solid rgba(255,0,0,.1); margin: 0 auto; background-repeat: no-repeat; background-image: url("http://img1.sycdn.imooc.com/climg//582c3b780001a95103000090.jpg") 0px 0px , url("http://img1.sycdn.imooc.com/climg//582c3b6d0001197603000090.jpg") 0px 100px, url("http://img1.sycdn.imooc.com/climg//582c3b61000122dd03000090.jpg") 0px 200px; } </style> </head> <body>  <div></div> </body> </html> 我的版本没反应，浏览器只显示辅助边框，没有显示背景图

2018-02-06 12:16:47
提问者慕慕6295533 #2

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>background-image</title> <style type="text/css"> /*此处写代码*/ div{ width: 300px; height: 190px; border: 5px solid rgba(255,0,0,.1); margin: 0 auto; background-repeat: no-repeat; background-image: url("http://img1.sycdn.imooc.com/climg//582c3b780001a95103000090.jpg") 0px 0px , url("http://img1.sycdn.imooc.com/climg//582c3b6d0001197603000090.jpg") 0px 100px, url("http://img1.sycdn.imooc.com/climg//582c3b61000122dd03000090.jpg") 0px 200px; } </style> </head> <body>  <div></div> </body> </html>

2018-02-06 12:17:18
提问者慕慕6295533 #3

删掉定位，就可以显示图片，但是只能显示未重叠后的一张

2018-02-06 12:19:57