博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS3 background-image允许你使用多背景图
阅读量:5842 次
发布时间:2019-06-18

本文共 1316 字,大约阅读时间需要 4 分钟。

 如果尚未对CSS3有一定的了解,相信你还会为要给同一个元素设置多个背景图而头痛。于是就衍生出一些使用伪对象来实现的解决方案,如使用
:first-letter
:first-line
:befor
:after等;又或是使用多个无意义标记堆叠来实现;又或是其它的什么方法。

  当然,方法没有错误,有的只是寻求最适合和最简单的。

  相信在CSS3 multiple background-image尚未出现之前,亦没有人会说自己的某某方法是最佳的,有的只是满足需求的一些变通方案(即使是在现在这种CSS3尚未被所有浏览器支持的情况下,是否要在项目中使用multiple background-image,也是你必须要考虑的问题)

  所谓有需求就会有变化,也许正是基于这样或那样的考虑,background-image终于将多背景图纳入了自己势力的范围之内。

  有之前使用background-image的经验,多背景图对于你来说,完全是锦上添花,你甚至都不必花更多的时间去了解它,因为多背景图与之前的单一背景图并无大的区别,让我么来看看简单的DEMO吧:。

  两者的细微区别:

  • 单一背景图语法:background-image:url();
  • 多重背景图语法:background-image:url(),url(),url()...

  你会发现多背景图只是在单一背景图的基础上,多添加一层背景图,就多设置一个url(),每个url()之间以半角逗号分隔。这种方式应该很常见了,比如说多字体间的间隔,不也正是这样么。

  组合与拆分写法:

组合:

.test{

    background:url(1.jpg) no-repeat,url(2.jpg) no-repeat 25px 25px,url(3.jpg) no-repeat 50px 50px;
}

拆分:

.test{

    background-image:url(1.jpg),url(2.jpg),url(3.jpg);
    background-repeat:no-repeat;
    background-position:0 0,25px 25px,50px 50px;
}

  如上组合与拆分这两种写法是等效的,依据实际情况使用适合的写法。拆分写法中的background-repeat:no-repeat之所以 可以缩写成这样,是因为该示例代码中的3个背景的平铺方式都为no-repeat。完整代码为: background-repeat:no-repeat,no-repeat,no-repeat;

  值得注意的地方:

  如果设置的多重背景图之间存在着交集(即存在着重叠关系),前面的背景图会覆盖在后面的背景图之上。DEMO请看这里:。

  如果存在着可比性的话,那么这个情况与元素的z-index正好相反,z-index默认下后者会覆盖前者,当然,其实这2者间不存在可比性,只是都有覆盖的情况,顺带一提。

转载于:https://www.cnblogs.com/cici_liang/archive/2011/10/08/2201892.html

你可能感兴趣的文章
网站文章如何能自动判定是抄袭?一种算法和实践架构剖析
查看>>
【OpenCV学习】滚动条
查看>>
为找好心人抚养孩子 浙江一离婚父亲将幼童丢弃公园
查看>>
读书:为了那个美妙的咔哒声
查看>>
ASMFD (ASM Filter Driver) Support on OS Platforms (Certification Matrix). (文档 ID 2034681.1)
查看>>
OllyDBG 入门系列教学--让你瞬间成为破解高手
查看>>
listbox用法
查看>>
寻找链表相交节点
查看>>
Linux crontab定时执行任务
查看>>
自己遇到的,曾未知道的知识点
查看>>
docker 基础
查看>>
我的友情链接
查看>>
写Use Case的一种方式,从oracle的tutorial抄来的
查看>>
【C#】protected 变量类型
查看>>
Ubuntu解压
查看>>
爬虫_房多多(设置随机数反爬)
查看>>
爬虫去重(只是讲了去重的策略,没有具体讲实现过程,反正就是云里雾里)...
查看>>
react中将px转化为rem或者vw
查看>>
avcodec_open2()分析
查看>>
何如获取单选框中某一个选中的值
查看>>