css 通过background将两张图合成一张图显示

需求背景：

后台返回两张图，一张是默认背景图bgimg，另一张是显示在背景上的图案img。
在列表中，bgimg一般不变，但img会根据不同的花的类型返回不同的图片。
需求是将两张图片叠在一起，让人以为是一张图片。
背景图bgimg：

图案img：

需求效果：

第一种方法：background

<div class="list-item"></div>

<style>
.list-item {
	backgroud:url(img) right bottom no-repeat,url(bgimg) left top no-repeat;
	height: 200px;
	width:300px;
}
</style>

backgroud 属性分开的写法

.list-item {
	/* 顺序排在第一的图片层级最高，
	排在最后的图片，显示层级最低。
	如果img是非透明的，就会遮挡层级低的 bgimg，
	不同图片用英文逗号隔开。*/
	backgroud-image: url(img),url(bgimg); 
	/* 背景图的定位和重复，用英文逗号隔开，
	定位对应的图片顺序与  background-image 的顺序一致  */
	backgroud-position: right bottom, left top;
	background-repeat: no-repeat, no-repeat;
}

做自适应布局时，可以这样写：

<!-- vue 项目-->
<ul class="ul-list">
    <li class="li-item"  v-for="item in datas" :key="item.id">
      <div class="bg-item">
          <div class="bg-img" :style="{ backgroundImage: 'url(' + item.img + '),url('+item.bgimg+')' }"></div>
       </div>
     </li>
 </ul>

<style lang="scss">
  .url-list {
      display: flex;
      flex-flow: wrap;
      margin-left: -12px;
      margin-right: -12px;
      .li-item {
        width: 50%;
        min-width: 240px;
        padding: 12px;
        .bg-img {
	        border-radius: 8px;
	        background-repeat: no-repeat;
	        background-size: cover;
	        background-position: left bottom, center;
		        &::before {
		          display: block;
		          content: " ";
		          min-width: 200px;
		          width: 100%;
		          padding-top: 56.25%; // 设置宽高固定比例，使图片在自适应过程中不变形
		        }
      	}
      }
      
}
  /* 媒体查询自适应 */
  @media (max-width:760px) {
	.url-list {
      .li-item {
        width: 100%;
        min-width: 200px;
      }
	}
  }
</style>

第二种方法：background+img

用 bgimg 设置 background，用 img 图片设置 撑开容器

<div class="bg-img-box">
	<img class="img-item" :src="item.img"/>
</div>
<style lang="scss">
/* 样式随便写的，根据实际情况调整 */
.bg-img-box {
	background: url(bgimg) center no-repeat;
	img {
		width:100px;
		height:100px;
	}
}
</style>

补充：CSS3 多重背景(multiple backgrounds)
多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。
语法缩写如下：
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],…
可以把上面的缩写拆解成以下形式：

background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;

注意：
用逗号隔开每组 background 的缩写值；
如果有 size 值，需要紧跟 position 并且用 “/” 隔开；
如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
background-color 只能设置一个。

第三种方法：img + img

<div class="bg-img-box">
	<!-- img-item-bg 的图片非透明 -->
	<img class="img-item-bg" :src="item.bg"/>
	<!-- img-item的图片是透明的 -->
	<img class="img-item" :src="item.img"/>
</div>
<style lang="scss">
/* 样式随便写的，根据实际情况调整 */
.bg-img-box {
	position: relative;
	img {
		position:absolute;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%)
		width:200px;
		height:200px;
	}
}
</style>

参考文献地址：

CSS3 背景|菜鸟教程