如何在一个div中设置多个背景的同时，同时设置3个背景图片的不同位置？
来源：2-18 编程练习
qq_一切都是最好的安排_1
2019-04-21 21:55:31
2-18 编程练习
小伙伴们，根据效果图写出代码，用所学的背景图片属性的知识，实现div元素中呈现多个背景图片
效果图如下：
任务
第一步：写出放置背景图片的html元素，给元素设置足够的宽和高
第二步：给元素加入多个背景图片
任务提示
Tips：
（1） 多个图片路径之间的符号
（2）注意每个图片位置的设置
（3）图片大小均是：300*90
（4）图片路径：
http://climg.mukewang.com/582c3b780001a95103000090.jpg
http://climg.mukewang.com/582c3b6d0001197603000090.jpg
http://climg.mukewang.com/582c3b61000122dd03000090.jpg
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.main{
width: 300px;
height: 400px;
margin: 0 auto;
border: 1px solid #333;
background: #abcdef url('http://climg.mukewang.com/582c3b780001a95103000090.jpg') no-repeat top center;
background: #abcdef url('http://climg.mukewang.com/582c3b6d0001197603000090.jpg') no-repeat center;
background: #abcdef url('http://climg.mukewang.com/582c3b61000122dd03000090.jpg') no-repeat bottom center;
background-clip: padding-box;
background-origin: padding-box;
background-size: 300px 90px;
}
</style>
</head>
<body>
<div class="main"></div>
</body>
</html>老师，请教您如何在一个div中设置多个背景的同时，同时设置3个背景图片的不同位置？如上图片显示。
写回答
1回答
-
好帮手慕星星
2019-04-22
同学你好，多张背景图片使用一个background属性即可，不同图片之间用逗号隔开，背景颜色需要去掉，否则不生效，图片的位置改变background-position属性值即可，如下：
可以重新测试下，祝学习愉快！
0
相似问题