请老师检查一下代码
来源: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回答
同学你好,测试效果如下:

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

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

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