我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

一个元素里面设置多张背景图,这个问题是苏南大叔刚刚入行的时候仔细想的问题。最后的解决方案是:嵌套了多个一模一样的div,然后每个div里面设置一张背景图(比如左下角一张图,右下角一张图)。然而,多年后,才发现事实的真相是:一个html元素本来也可以设置多个背景图...多么痛的领悟...

苏南大叔:css教程,一个html元素里面如何设置多张背景图? - 多张背景图
css教程,一个html元素里面如何设置多张背景图?(图3-1)

苏南大叔的“程序如此灵动”技术博客,记录苏南大叔的编程经验总结。本文测试环境:win10chrome@118.0.5993.89

写法原理

css写法就是在background属性里面,定义多个背景,中间使用英文逗号做间隔。

background:url(图一路径)图一位置,url(图二路径)图二位置,url(图N路径)图N位置

实战例子

苏南大叔的博客右侧边栏的顶部位置,使用了两张图片作为一个元素的背景图。参考下图:

苏南大叔:css教程,一个html元素里面如何设置多张背景图? - 多张背景图设置代码
css教程,一个html元素里面如何设置多张背景图?(图3-2)

代码参考:

<span class="name">sunan</span>
<style>
.name {
    font-weight: 700;
    width: 200px;
    height: 55px;
    line-height: 35px;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    background: url(../img/bg/fly.png) center top no-repeat,url(../img/loading.gif) no-repeat center bottom 6px;
}
</style>

重点就是下面这句话:

background: url(../img/bg/fly.png) center top no-repeat,url(../img/loading.gif) no-repeat center bottom 6px;

背景图优先级

多张背景图之间是有优先级的,在Z方向上是从上到下定义的,也就是说:先定义的背景图在最上面,后面的图为了显示出来,就必须放置一个更合适的位置,比如上一张图的某个透明空白的地方。

苏南大叔:css教程,一个html元素里面如何设置多张背景图? - 多张背景图优先级
css教程,一个html元素里面如何设置多张背景图?(图3-3)

如果设置的位置重叠,是可能发生背景覆盖的现象的。定义在后面的背景图不会覆盖定义在前面的,这里说的是表现层上的覆盖,覆盖一部分,另外一部分还露出来。

相关文章

结束语

苏南大叔偶尔也调试调试页面,修改修改代码。更多css代码经验文章,请参考苏南大叔的系列精彩文章:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   css