请老师检查一下代码
来源:4-3 编程练习
 
			qq_秋水_13
2019-07-23 23:43:22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .page{width:100%;
              height: 4043px;
              background: url( http://climg.mukewang.com/59c9f7ce0001839219034033.png) center top no-repeat;
              background-size: 100% 100%;}
        .left{background: url(http://climg.mukewang.com/5a3383c70001f1b702240364.png) center top no-repeat;
            width: 250px;
             height:400px;
             position: fixed;
             left: 0;
             top:50%;
             margin-top: -200px;
             }
        .right{
            background:url(http://climg.mukewang.com/5a3383d00001a3dd02240364.png) center top no-repeat;
            width:250px;
             height:400px;
             position: fixed;
             right: 0;
             top:50% ;
             margin-top: -200px;}
    </style>
</head>
<body>
    <div class="page">
        
    <div class="left"> </div>
    <div class="right"></div>
    </div>
</body>
</html>为什么背景图片感觉被压缩了
1回答
同学你好,测试效果如下:

可能是显示器分辨率的问题,老师这边分辨率大一些,看起来就是正常的,没有压缩的效果,不过大的背景图样式设置没有问题。
左右两侧图片在高度上没有充满父容器,

所以看起来不是垂直居中显示的,可以修改一下:

将两个盒子设置成图片一样的宽高。
可以重新测试下,祝学习愉快!
望采纳~
相似问题