需求背景:
后台返回两张图,一张是默认背景图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将两张图合成一张图显示》对你有帮助,请点赞、收藏,并留下你的观点哦!