麻烦老师解答作业，谢谢。
来源：2-20 编程练习
DanielDu87
2021-12-19 20:10:37
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>background-image</title>
<style type="text/css">
/*此处写代码*/
* {
padding: 0;
margin: 0;
}
div.b1 {
width: 300px;
height: 280px;
padding: 10px;
background: url(http://climg.mukewang.com/582c3b780001a95103000090.jpg) no-repeat center top,
url(http://climg.mukewang.com/582c3b6d0001197603000090.jpg) no-repeat center center,
url(http://climg.mukewang.com/582c3b61000122dd03000090.jpg) no-repeat center bottom;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="b1"></div>
</body>
</html>加了padding，或者总宽度大于3个图片的宽度，剩下的空白部分是不是就自动均匀分布了，但是为什么是分布在3个图片中间，图片的上下没有呢
写回答
1回答
-
好帮手慕然然
2021-12-20
同学你好，解答如下：
在设置background属性时，分别设置了三张背景图片所在的位置为：center top、center top、center bottom，即水平方向居中，垂直方向分别位于上中下的位置，如图
关于“为什么是分布在3个图片中间，图片的上下没有呢”是因为背景图片的垂直方向的位置分别是top、center、bottom，其中top是紧贴盒子的顶部，bottom是紧贴盒子的底部。所以图片的上下没有空白。
祝学习愉快！
0
相似问题