请老师检查一下代码

来源: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回答

好帮手慕星星

2019-07-24

同学你好,测试效果如下:

http://img.mukewang.com/climg/5d37d1bb0001d5d619120979.jpg

可能是显示器分辨率的问题,老师这边分辨率大一些,看起来就是正常的,没有压缩的效果,不过大的背景图样式设置没有问题。

左右两侧图片在高度上没有充满父容器,

http://img.mukewang.com/climg/5d37d22700019c9703160479.jpg

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

http://img.mukewang.com/climg/5d37d295000145bd04670572.jpg

将两个盒子设置成图片一样的宽高。

可以重新测试下,祝学习愉快!

望采纳~

0

0 学习 · 40143 问题

查看课程