2-20 作业，请老师帮忙检查

是哪一种实现效果呢？还有第二种之间的三个图片是会自动均分盒子内的空间的吗？高度上没有设置图片之间的间隔但是却自动隔开了

相关代码：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>background-image</title>
    <style type="text/css">
        /*此处写代码*/
        div {
            width: 300px;
            height: 90px;
            margin-bottom: 20px;
        }

        .box1 {
            background-image: url(http://img1.sycdn.imooc.com/climg//582c3b780001a95103000090.jpg);
            background-position: center center;
        }

        .box2 {
            background-image: url(http://img1.sycdn.imooc.com/climg//582c3b6d0001197603000090.jpg);
        }

        .box3 {
            background-image: url(http://img1.sycdn.imooc.com/climg//582c3b61000122dd03000090.jpg);
        }

        .box4 {
            width: 300px;
            height: 300px;
            background: url(http://img1.sycdn.imooc.com/climg//582c3b780001a95103000090.jpg) no-repeat top center,url(http://img1.sycdn.imooc.com/climg//582c3b6d0001197603000090.jpg) no-repeat center center,url(http://img1.sycdn.imooc.com/climg//582c3b61000122dd03000090.jpg) no-repeat bottom center;
        }
    </style>
</head>

<body>
    <!-- 此处写代码 -->
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <hr>
    <div class="box4"></div>
</body>

</html>

呜蜩的呀 2022-07-23

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

收起

1回答

好帮手慕慕子 2022-07-24 09:59:41

同学你好，问题解答如下：

1、是第二种。符合练习要求针对一个div设置多背景图的效果。

2、不会自动均分盒子内的空间。因为div设置的高度为300px，每个图片自身高度为90px，而第一张图片在div顶部显示，第二张图片在中心显示，第三张图片在底部显示，三个图片总高度为270px，而盒子剩余空间为30px，所以图片之间会有空白间距。

祝学习愉快~

收起回答

提问者呜蜩的呀 #1

就是说这三张图片的中间空白间距是自动分配的吗？如果盒子高度只有90的话那么这三张之间的空隙是就没有了是吗，就是总的还是要看盒子的高度分配是吗？

2022-07-24 11:37:53
好帮手慕慕子回复提问者呜蜩的呀 #2

同学你好，问题解答如下：
1、可以理解为自动分配的。
2、如果盒子高度只有90的话，只会显示一张图片，如下：
如果盒子的高度刚好等于三张图片的高度之和，那么三张图片之间就不存在间隙，如下：
3、可以理解为要看盒子的高度分配。
祝学习愉快~

2022-07-24 13:05:29
提问者呜蜩的呀回复好帮手慕慕子 #3

好的，谢谢老师

2022-07-24 14:44:43