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

您所在的位置：网站首页 › ppt怎样把图片与背景融合成一张 › css 通过background将两张图合成一张图显示

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

2024-07-11 08:34| 来源: 网络整理| 查看: 265

需求背景：

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

第一种方法：background .list-item { backgroud:url(img) right bottom no-repeat,url(bgimg) left top no-repeat; height: 200px; width:300px; }

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; }

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

.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; } } } 第二种方法：background+img

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

/* 样式随便写的，根据实际情况调整 */ .bg-img-box { background: url(bgimg) center no-repeat; img { width:100px; height:100px; } }

补充：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 /* 样式随便写的，根据实际情况调整 */ .bg-img-box { position: relative; img { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%) width:200px; height:200px; } }

在这里插入图片描述

参考文献地址：

CSS3 背景|菜鸟教程

【本文地址】

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

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

今日新闻

推荐新闻