请老师检查一下代码
来源: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回答
同学你好,测试效果如下:
可能是显示器分辨率的问题,老师这边分辨率大一些,看起来就是正常的,没有压缩的效果,不过大的背景图样式设置没有问题。
左右两侧图片在高度上没有充满父容器,
所以看起来不是垂直居中显示的,可以修改一下:
将两个盒子设置成图片一样的宽高。
可以重新测试下,祝学习愉快!
望采纳~
相似问题