请问background-size为何不起作用
1 | <br> |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>background属性</title>
<style type="text/css">
/*此处写代码*/
.element{
width:700px;
height:500px;
background-color:#ccc;
text-align:center;
border:20px rgba(254,0,0,0.5) solid;
padding:20px;
}
.img{
background-image:url("http://img1.sycdn.imooc.com/climg//582c39c00001091605000150.jpg");
background-repeat:no-repeat;
background-clip:padding-box;
background-size:90%
margin:0 auto;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="element">
<h1>慕课网(IMOOC)国内最大的IT技能学习平台</h1>
<div class="img"></div>
</div>
</body>
</html>
1 | <br> |
正在回答
同学你好，background-size 属性规定背景图像的尺寸，即规定引入图片的尺寸：
并不是设置<div class="img"></div>尺寸，因此即使设置了background-size:90% 90%;或background-size:90% 500px;，<div class="img"></div>的高度还是为0，效果还是出不来。
建议添加高度属性，如下：
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧