最近做的项目需要用到多张底图(背景图)
最开始做的时候能想到的办法只有嵌套多层div然后设置背景图并定位以实现
今天重写这块代码发现明明可以很简单的解决!!!
话不多说,上代码
<div class="menu"><!-- 任意内容 --> </div>
先定义元素类名,再在css中设置背景图
.menu {background-repeat: no-repeat;background-size: contain, contain; /* 或者使用 contain 来确保背景图片完全显示,可以分别为每个背景图片设置大小 */background-image: url(../assets/images/img1.png),url(../assets/images/img2.png); /* 设置两个背景图片 */background-size: 120px 120px, 120px 120px; /* 可以分别为每个背景图片大小 */background-position: top left, bottom right; /* 可以分别为每个背景图片设置位置 */
}
到此,就okk了
效果展示
【记录下来给自己以后使用(^-^)】