老师，请问这样写对吗

另外，为什么背景图没有显示完全呢？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title></title>
<style>
    * {
        padding:0;
        margin:0;
    }
    .page {
        width:100%;
        height:4100px;
        background:url("http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png") top center no-repeat;
    }
    .adv1 {
        width:224px;
        height:380px;
        background:url("http://img1.sycdn.imooc.com/climg//5a3383d00001a3dd02240364.png") top center no-repeat;
        position:fixed;
        left:0;
        top:50%;
        margin-top:-190px;
    }
    .adv2 {
        width:224px;
        height:380px;
        background:url("http://img1.sycdn.imooc.com/climg//5a3383c70001f1b702240364.png") top center no-repeat;
        position:fixed;
        right:0;
        top:50%;
        margin-top:-190px;
    }
</style>
</head>
<body>
<div class="page">
   <div class="adv1"></div>
   <div class="adv2"></div>
</div>
</body>
</html>

慕少7337496 2019-09-17

源自：CSS定位（position） 4-3 编程练习

收起

3回答

好帮手慕夭夭 2019-09-17 18:29:25

你好同学，第一个值表示水平方向上的尺寸，第二个表示垂直方向上的尺寸。如果只设置第一个值，那么高度会根据宽度的变化，按照原比例进行缩放的。像你设置了一个值，图片按照原比例缩放后，高度没有办法铺满的容器的，因为容器很高，如下：

像老师那样设置的话，垂直方向也会拉伸图片，让它填满盒子。所以才会有一点变形。这个没有关系的。建议同学不用再纠结背景图的问题哦。实际中，也不会把整个网页作为一个背景图的。本题提供一个大背景图只是作为装饰的哦。按照老师那么设置即可。如果你不想要它变形的那么厉害，把大容器的高度改一小点，例如2000px。

祝学习愉快，望采纳。

收起回答