老师帮忙检查一下，还有就是背景图片显示不全问题
来源：4-3 编程练习
胡小菜
2019-06-28 01:56:17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>慕课网</title>
<style>
*{
margin: 0;
padding: 0;
}
/*形式一*/
/* html,body{
width: 100%;
height: 100%;
}
*/
.bgimg{
width: 100%;
height: 4043px;
/*形式二*/
background-size: 100% 100%;
background:url(http://climg.mukewang.com/59c9f7ce0001839219034033.png) center no-repeat;
}
.banner-left,.banner-right{
width: 224px;
height: 250px;
}
.banner-left{
background:url(http://climg.mukewang.com/5a3383d00001a3dd02240364.png) center top no-repeat;
position: fixed;
left:0;
top:50%;
margin-top: -125px;
cursor: pointer;
}
.banner-right{
background:url(http://climg.mukewang.com/5a3383c70001f1b702240364.png) center top no-repeat;
position: fixed;
right:0;
top:50%;
margin-top: -125px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="bgimg"></div>
<div class="banner-left"></div>
<div class="banner-right"></div>
</body>
</html>3回答
-
雨夜幻灵
2019-07-02
这样改一下，图片就不会显示不全了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>慕课网</title>
<style>
*{
margin: 0;
padding: 0;
}
/*形式一*/
/* html,body{
width: 100%;
height: 100%;
}
*/
.bgimg{
width: 100%;
height: 3000px;
/*形式二*/
background:url(http://climg.mukewang.com/59c9f7ce0001839219034033.png) top no-repeat;
background-size: 1350px 3000px;
}
.banner-left,.banner-right{
width: 224px;
height: 250px;
}
.banner-left{
background:url(http://climg.mukewang.com/5a3383d00001a3dd02240364.png) center top no-repeat;
position: fixed;
left:0;
top:50%;
margin-top: -125px;
cursor: pointer;
}
.banner-right{
background:url(http://climg.mukewang.com/5a3383c70001f1b702240364.png) center top no-repeat;
position: fixed;
right:0;
top:50%;
margin-top: -125px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="bgimg"></div>
<div class="banner-left"></div>
<div class="banner-right"></div>
</body>
</html>
0 -
好帮手慕慕子
2019-06-28
同学你好， 代码效果实现是可以的。
因为背景图片太大了， 导致不能全部显示， 这里主要是为了让同学练习backgroud的一些属性， 巩固一下所学的知识， 同学效果实现就可以了， 可以不用纠结背景图片无法全部显示的问题哦， 实际工作中，也不会直接使用这么大的图片做为背景图片的。
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
0 -
胡小菜
提问者
2019-06-28
用了 形式一 和 形式二 都没办法全部显示背景图片 怎么回事？
0
相似问题