需求背景：

后台返回两张图，一张是默认背景图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 背景|菜鸟教程

css 通过background将两张图合成一张图显示相关推荐

【Python基础绘图】Python多张png合成gif动图
[Python基础绘图]Python多张png合成gif动图前段时间准备答辩ppt想展示下逐月的空间变化趋势,故想到了动图的方式,将多张png图片转变为gif动图.下面是代码记录一下. 首先需要准备 ...
多张gif合成一张怎么操作？手把手教你快速合成gif动图
我常常会将多张有趣的gif动图合成一张gif来使用,这样不仅能让图片变得更有趣还能释放一定的储存空间,最重要的是几乎不会影响画质.一般我都会使用[GIF中文网]的gif在线制作(https://www ...
将matlab中多幅图合成为一幅图,MATLAB画图之多个图以子图的形式合为一个图
解决问题:已经画好了多个figure,在不重复添加画图程序时,将多个图合为一个图. 通常我们会将各个图单独画出来看效果,但是写文章过程中,经常为了排版等问题,需要将几个图分别以子图的形式合为一个图,这 ...
python两张图合成一张_Python图像处理实现两幅图像合成一幅图像的方法【测试可用】...
本文实例讲述了Python图像处理实现两幅图像合成一幅图像的方法.分享给大家供大家参考,具体如下: 将两幅图像合成一幅图像,是图像处理中常用的一种操作,python图像处理库PIL中提供了多种种将两幅 ...
如何把很多照片拼成一张照片_ps里面怎么把多张图合成一张图
在PS图片的处理当中,经常会遇到要求把两张图片或者多张图片合成一张图片的要求.尤其在我们的日常工作中是比较常见的,那么该怎么操作呢,这里我们来看一下多张图片的合成. 打开ps,我这里用的是CS6的版本 ...
python两张图片无缝合成一张_Python将多张图片进行合并拼接
import PIL.Image as Image import os IMAGES_PATH = 'E:\picture\新垣结衣\\' # 图片集地址 IMAGES_FORMAT = ['.jpg ...
python两张图片无缝合成一张_python如何将两张图片生成为全景图片
本文实例为大家分享了python将两张图片生成全景图片的具体代码,供大家参考,具体内容如下 1.全景图片的介绍全景图通过广角的表现手段以及绘画.相片.视频.三维模型等形式,尽可能多表现出周围的环境. ...
python两张图片无缝合成一张_详解基于python的多张不同宽高图片拼接成大图
#!/usr/bin/env python # -*- coding:utf-8 -*- import PIL.Image as Image import os IMAGES_PATH = 'D:Ma ...
python两张图片无缝合成一张_使用python拼接多张图片.二三事
前几日在博客上看到一篇"使用python拼接多张图片"的Blog[具体是能将的图片名字必须是形如xx_1.png ... xx_100.png或者xx_001.png ... xx ...

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