老师，为啥我这放到浏览器里面背景图总是过大呢，有什么办法正好显示吗
来源：4-3 编程练习
qq_慕先生2229342
2020-04-18 19:09:54
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0px;
padding:0px;
}
.page{
width:100%;
height:4033px;
background:url(http://climg.mukewang.com/59c9f7ce0001839219034033.png) no-repeat center top;
position:relative;
}
.nav,.mav{
width:200px;
height:260px;
position:fixed;
top:50%;
margin-top:-130px;
}
.nav{
background:url(http://climg.mukewang.com/5a3383d00001a3dd02240364.png);
left:0px;
}
.mav{
background:url(http://climg.mukewang.com/5a3383c70001f1b702240364.png);
right:0px;
}
</style>
</head>
<body>
<div class="page">
<div class="nav">
</div>
<div class="mav">
</div>
</div>
</body>
</html>
2回答
-
同学你好哇 关于背景图片的大小 涉及到一个css3的属性 background-size 属性：规定背景图像的尺寸。 可能是因为css3的关系，老师们还没讲吧， 你可以 在背景图那里 再添加一个 background-size: contain; 意思是把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 这样 就能完整的显示出来了 慢慢后面都会有学 如果对你有帮助，望采纳哈
1 -
好帮手慕星星
2020-04-19
同学你好，下面‘爱coding的疾风剑豪’同学说的可以参考一下，确实需要使用css3中背景大小属性去完成，可以使用background-size: 100% 100%；完成 。
另外左右两侧的图片没有完全显示出来
可以调整盒子大小为图片原始尺寸大小，然后调整垂直方向上的定位位置。参考
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题
回答 3
回答 2