HTML 背景图布满整个div
在编写HTML代码时,偶尔会遇到这种情况,我们要展示的背景图的大小与实际的div大小不一致(此时的背景图是静态资源而非接口请求数据)。设置背景图的css是background: url(...) 假设现在有一张背景图的长宽是100px*100px, 而外层的div大小是400px*400px,那么根据以下代码:<!DOCTYPE html><html lang="en">&
·
在编写HTML代码时,偶尔会遇到这种情况,我们要展示的背景图的大小与实际的div大小不一致(此时的背景图是静态资源而非接口请求数据)。
设置背景图的css是background: url(...) 假设现在有一张背景图的长宽是100px*100px, 而外层的div大小是400px*400px,那么根据以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div {
margin: 0 auto;
width: 400px;
height: 400px;
font-size: 28px;
color: tomato;
text-align: center;
background: url('./1.jpg');
border: 1px solid ;
}
.img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="div">
侧耳倾听
</div>
</body>
</html>
得到的结果是这样的(文本内容只是展示,实际中会有更多信息):
只需要给div添加一行代码即可解决问题:
background-size: 100% 100%;
可看到图片已经铺满整个div区域。但这时候图片失真了。如果图片的长宽比例与div一致,自己打开画图工具调整一下就好,如果不一致,最好还是向UI再要一张合适的UI图吧。。。
更多推荐
已为社区贡献1条内容
所有评论(0)