老师请看一下这样写可以吗？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        .page{
            background: url(http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png) center top no-repeat;
            background-size: 100% 100%;
            height: 4033px;
            width: 100%;
        }
        .left{
            left:0;
            position: fixed;
            top:50%;
            margin-top: -132px;

        }
        .right{
            right:0;
            position: fixed;
            top:50%;
            margin-top: -132px;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="left">
            <a href="https://www.imooc.com/"><img src="http://img1.sycdn.imooc.com/climg//5a3383c70001f1b702240364.png"></a>
        </div>
        <div class="right">
            <a href="https://www.imooc.com"><img src="http://img1.sycdn.imooc.com/climg//5a3383d00001a3dd02240364.png"></a>
        </div>
    </div>
    
</body>
</html>

南方记忆 2019-05-28

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

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2019-05-29 10:16:13

你好，原图是364px，但是left的高度不是364px哦，如下：

是老师之前说的高度368px，图片是内联元素，默认有间隙，所以父容器高度被撑大了，可以设置图片为块元素：

这样修改之后同学开始写的代码就是正确的，可以再测试下。

祝学习愉快！

收起回答

南方记忆提问者 #1

老师您好，刚刚试了一下尺寸变小了，但还是不太明白，原因是块元素是没有间隙的吗？

2019-05-29 10:43:20
好帮手慕星星回复提问者南方记忆 #2

你好，是的，块元素没有默认的间隙，内联元素是有默认间隙的（inline和inline-block）。

2019-05-29 17:38:23
南方记忆提问者 #3

谢谢老师的解答！

2019-05-29 18:08:36

好帮手慕夭夭 2019-05-28 18:37:22

你好同学，图片原图高度为368px,所以在设置margin-top的时候，要设置为高度一半，这样图片中心点才会垂直居中，如下：

祝学习愉快，望采纳。

收起回答

提问者南方记忆 #1

老师您好，图片原高度是364px吧？

2019-05-28 19:14:28
好帮手慕夭夭回复提问者南方记忆 #2

同学很抱歉老师这里写错了，原图是364px。

2019-05-28 19:24:38
提问者南方记忆 #3

如果是364px的话，我之前写的是否正确呢？ .left{ left:0; position: fixed; top:50%; margin-top: -132px; } .right{ right:0; position: fixed; top:50%; margin-top: -132px;

2019-05-28 19:29:05