请问background-size为何不起作用
来源：2-15 编程练习
rayyli
2020-07-25 23:57:21
<!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://climg.mukewang.com/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>
3回答
-
同学你好，background-size 属性规定背景图像的尺寸，即规定引入图片的尺寸：
并不是设置<div class="img"></div>尺寸，因此即使设置了background-size:90% 90%;或background-size:90% 500px;，<div class="img"></div>的高度还是为0，效果还是出不来。
建议添加高度属性，如下：
祝学习愉快~
1h020-07-26 -
好帮手慕码
2020-07-26
同学你好，“喝牛奶对身体好”同学讲的很对，img缺少高度，无法撑开，建议添加高度属性。另，代码中缺少分号，导致样式没有生效：
祝学习愉快~
0h020-07-26 -
喝牛奶对身体好
2020-07-26
<div class="img"></div>这个div没有内容，高度是0自然背景图片也显示不出来。设置一个高度或加点文字就能看见了
0h020-07-26
相似问题