一、就一个div,设置其背景图片
1.背景图片
2.代码
#left-bottom { /*height: 31%;*/ height: 38%; margin-top: 25px; position: relative; border: 1px solid red; /* 设置背景尺寸 */ background-size:100% 100%; background-image:url("../static/images/panel.png") ; background-repeat:no-repeat; box-sizing: border-box; }
3.图片展示
图中的红色边框是div的大小,正好填充完全
二、在div里面填充一张图片
1.要填充的图片
2.html代码
<div class="left-bottom"> <div class="left-bottom1"> <img src="@/assets/tp.svg" alt=""></div> </div>
3.css代码
.left-bottom1 { border: 1px red solid; position: relative; width: 30px; height: 30px; top: 20%; left: 35%; } //设置容器里面图片的大小 .left-bottom1 img { width: 100%; height: 100%; }
4.图片展示
图中的红色边框是div的大小,正好填充完全