老师,高度设置auto,背景图怎么显示不出来啊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>定位练习</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body,html{
width: 100%;
height: 100%;
}
.div{
width:100%
height:auto;
background: url(http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png) center top
}
.one{
background: url(http://img1.sycdn.imooc.com/climg//5a3383d00001a3dd02240364.png) no-repeat;
width:220px;
height:360px;
position: fixed;
left: 0;
top: 50%;
margin-top: -180px;
display: inline-block;
}
.two{
background: url(http://img1.sycdn.imooc.com/climg//5a3383c70001f1b702240364.png) no-repeat;
width:220px;
height:360px;
position: fixed;
right: 0;
top: 50%;
margin-top: -180px;
display: inline-block;
}
</style>
</head>
<body>
<div class="div">
<div class="one"></div>
<div class="two"></div>
</div>
</body>
</html>
正在回答
div是块级元素,需要给其设置宽高属性。
设置height为auto,由于代码中的块级元素只设置其背景,实际元素内并无可以将其撑起来的子元素或其他元素,故没有显示背景图
解决:可以将 height:auto 修改为 height:100% 或指定高度
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星