老师请检查一下作业！
来源：4-3 编程练习
好狗边上飘314
2019-09-28 21:28:06
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0;
padding:0;}
html,body{width:100%;
height:100%;
}
.testone{width:100%;
height:4033px;
background:url("http://climg.mukewang.com/59c9f7ce0001839219034033.png") center top no-repeat;
}
.testtwo{width:100%;
height:100%;
background:url("http://climg.mukewang.com/5a3383c70001f1b702240364.png") no-repeat;
position:fixed;
left:0;
top:50%;
margin-top:-182px;
}
.testthree{width:100%;
height:100%;
background:url("http://climg.mukewang.com/5a3383d00001a3dd02240364.png") no-repeat;
position:fixed;
left:100%;
top:50%;
margin-top:-182px;
margin-left:-224px;
}
</style>
</head>
<body>
<div class="testone"></div>
<div class="testtwo"></div>
<div class="testthree"></div>
</body>
</html>第一张图是1903*4033的，个人电脑分辨率最大是1366*468的，所以要把浏览器窗口调小才可以达到展示效果！可以改动哪里的代码，一样达到图示效果吗？
写回答
2回答
-
你好同学，这里给背景图设置背景尺寸就行，也不用和效果图一模一样，电脑分辨率不一样，显示出来的会有一些差异的。另外，这个大背景图就是为了装饰作用的，本题主要是考察左右图片的定位设置哦。根据第二次上传代码，参考如下调整即可：
background-size: cover是让背景图缩小或者放大，以使背景图像完全覆盖背景区域。
祝学习愉快，望采纳。
0 -
好狗边上飘314
提问者
2019-09-28
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin:0; padding:0;} html,body{width:100%; height:100%; } .testone{width:100%; height:4033px; background:url("http://climg.mukewang.com/59c9f7ce0001839219034033.png") center top no-repeat; } .testtwo{width:224px; height:364px; background:url("http://climg.mukewang.com/5a3383c70001f1b702240364.png") no-repeat; position:fixed; left:0; top:50%; margin-top:-182px; } .testthree{width:224px; height:364px; background:url("http://climg.mukewang.com/5a3383d00001a3dd02240364.png") no-repeat; position:fixed; left:100%; top:50%; margin-top:-182px; margin-left:-224px; } </style> </head> <body> <div class="testone"></div> <div class="testtwo"></div> <div class="testthree"></div> </body> </html>重新提交一下，两幅广告图没有设置好！
0
相似问题