先上图,需要实现下面这种样式
引入背景图
height: 36px;
background: url('~static/assets/img/warn_border.svg') no-repeat;
background-size: 100% 100%;
发现并没有被撑开
解决:
background-size: cover;
或者
background-size: auto 100%;
下面介绍background-size使用语法
length:设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 “auto”。
background-size: 100px 80px; // 背景图片宽为100px,高为80px
percentage: 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 “auto”。
background-size:60% 80%; // 背景图片的显示宽度是图片大小的60%,高度是80%;
cover: 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain: 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。