为什么设置background-size就不一样了?

为什么设置background-size就不一样了?

还有container高度设置了太高了,会有很多的留白,该怎么处理?把height等于4000改成100%为什么不行

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

<title></title>

<style>

html,body{

margin:0;

padding:0;

}

.container{

width:100%;

height:4000px;

background:url("http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png") no-repeat center top;

background-size:100%;//设置了

}

.left{

width:200px;

height:400px;

background:url("http://img1.sycdn.imooc.com/climg//5a3383c70001f1b702240364.png") no-repeat center top;

position:fixed;

left:0;

top:50%;

margin-top:-200px;

background-size:100%;//设置了

}


.right{

width:200px;

height:400px;

background:url("http://img1.sycdn.imooc.com/climg//5a3383d00001a3dd02240364.png") no-repeat center top;

position:fixed;

right:0;

top:50%;

margin-top:-200px;//没有

}

</style>

</head>

<body>

<div class="container">

<div class="left"></div>

<div class="right"></div>

</div>

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕星星 2019-05-17 11:21:24

你好,background-size属性是有两个值的,如果只设置一个值,另一个值就是auto,所以需要两个都是设置100%才可以生效,如下:

http://img1.sycdn.imooc.com//climg/5cde28880001725c06120215.jpg

http://img1.sycdn.imooc.com//climg/5cde289c00015bdb05980313.jpg

http://img1.sycdn.imooc.com//climg/5cde28ad0001a05805890306.jpg

可以重新测试下,祝学习愉快!

  • 提问者 芥子1204 #1
    把height改成百分之百为什么不行?
    2019-05-17 11:24:40
  • 好帮手慕星星 回复 提问者 芥子1204 #2
    高度百分比是根据父容器高度来设置的,所以需要在html和body标签中添加height属性为100%,container容器中设置height:100%;才会生效,可以试一下。
    2019-05-17 11:32:54
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师
插入代码