麻烦老师检查一下,谢谢!

来源：4-3 编程练习

bao_

2020-01-21 18:31:26

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
    *{
        margin:0px;
        padding:0px;
    }
.page {
width: 100%;
height: 4444px;
background: url("http://img1.sycdn.imooc.com\/climg/59c9f7ce0001839219034033.png") no-repeat center top;

}

.left {
width: 220px;
height: 260px;
background: url("http://climg.mukewang.com/5a3383c70001f1b702240364.png") no-repeat center top;
position:fixed;
top:50%;
left:0px;
margin-top:-130px;
}
.right {
width: 220px;
height: 260px;
background: url("http://climg.mukewang.com/5a3383d00001a3dd02240364.png") no-repeat center top;
position:fixed;
top:50%;
right:0px;
margin-top:-130px;
}
</style>
</head>

<body>
<div class="page">
<div class="left"></div>
<div class="right"></div>
</div>
</body>

</html>

为什么我这个图片还是显示不完全,有什么办法显示全,还有就是https://class.imooc.com/course/qadetail/187234

它这个类名content为啥加相对定位(relative),用固定定位一定要相对这个相对定位固定吗,还有它初始化margin: 0 auto;为啥要这样,不是margin 0 0 0 0;???

写回答

5回答

好帮手慕慕子

2020-01-23

已采纳

同学你好，这个就是浏览器的大小和图片本身的大小不对应造成的，同学不用纠结，一般实际开发中，会使用background-size设置统一的效果。

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

好帮手慕慕子

2020-01-23

同学你好，对于你的问题解答如下：

这个图片本身的宽度是1903px, 如果不设置background-size属性，需要在电脑分辨率刚好为1903px,才可以显示完全。由于我们不能控制其他人用什么样的电脑分辨率打开页面，所以建议：同学添加上background-size属性，确保所有人打开页面，都是全屏显示的。
content加不加相对定位没有影响，可以去掉。固定定位是相对于窗口进行定位的。
初始化一般是设置margin:0；这位同学写成margin:0 auto; 为他实现的效果是没有影响的，可以去掉。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

hao_

h 我的电脑分辨率是1920x1080的

h020-01-23

共1条回复

好帮手慕言

2020-01-22

同学你好，有可能是因为你的电脑分辨率小导致的，如果不能完全显示，可以设置background-size: 100%;

如果还有其他疑问，建议在问答区重新提问，便于后期查找总结

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

hao_

h 多大分辨率才能显示全呀,还有这个https://class.imooc.com/course/qadetail/187234 它这个类名content为啥加相对定位(relative),用固定定位一定要相对这个相对定位固定吗,还有它初始化margin: 0 auto;为啥要这样,不是margin 0 0 0 0;???

h020-01-22

共1条回复

好帮手慕言

2020-01-22

同学你好，类名为page的元素，背景图是显示完整的，如下：