失眠网 > css 通过background将两张图合成一张图显示

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

时间：2020-11-26 09:12:51

需求背景：

后台返回两张图，一张是默认背景图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;}

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

<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 class="img-item-bg" :src="item.bg"/><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>