div添加图片 如何为一个div添加多个背景图片

大家在制作页面的时候,一个div只能有一个背景图片。如果需要多个,就要新建元素,下面是小编给大家整理的一些有关为一个div添加多个背景图片的方法,希望对大家有帮助!

为一个div添加多个背景图片的方法

首先,我们新建一个HML页面,并准备好两张不同的背景图片。

然后,我们在htl中随便新建一个块级元素,为他设置宽高,可以写点文字。浏览器中的效果是下图这样的。

然后,我们开始为元素添加背景图片,我是将background-*这个属性分开来写的。分别是background-image,background-position,backgroud-repeat

在CSS3语法里面,除了backgroud-color是唯一一个不能使用多个值的background-*元素,所以,我们以上的三个元素都可以使用多个值,两个值之间以逗号相连。

但是如果一个属性的数量,少于背景层的数量,那么这个属性就会被应用到所有的背景层上面,所以我们的backgroud-repeat只用写一个。

我们在浏览器刷新之前的页面可以看到最新的效果,两个背景图片都显示到我们的标签上。基本上是先写的图片的z-index值高

div添加图片 如何为一个div添加多个背景图片

除了把这些属性分开写,我们也可以只写一个background。具体写法如下图。两个背景图片之间同样用逗号隔开。

END

  

爱华网本文地址 » http://www.413yy.cn/a/200561/91110689.html

更多阅读

经销商运营手册 2012年如何为经销商规划多店运营

  某县经销商小K,我称之为老弟,他喊我郑哥。由于这层关系,我们什么都会开聊。对于一线的经销商,我从来非常尊重他们与声音,及时地分析他们的想法,再作出县域门店的全局或阶段性规划。   四年不到的时间,小K一口气开

店面活动氛围布置图片 如何布置一个旺财的服装店面?

  在风水学上,屋子的前方叫做“明堂”,即是房子前面的空地。房子前面的空地要大,马路拓宽的时候,房子才不会被冲掉;此外,明堂的深度够,这样房子感觉起来比较稳,能得比较长久,财源也会慢慢进来。此外,明堂可依距离马路的远近,分为外、中、内

qq表情gif动态图片 gif动态图片如何添加为QQ表情

gif动态图片如何添加为QQ表情――简介经常在QQ里发现好友发布的一些有意思的动态图都忍不住想要拿来自己用用,可是又不知道如何化为己用。今天雷锋崔老师就教你如何添加GIF动态图为QQ表情。gif动态图片如何添加为QQ表情――工具/原

下载网页全部图片 如何下载一个网页全部图片

如何下载一个网页全部图片――简介当我们浏览网页,如果网页上有很多的图片,一张张右键保存十分的累,分享一下一次操作就可以把所有的图片保存下来的方法。如何下载一个网页全部图片――工具/原料浏览器如何下载一个网页全部图片――方

如何添加系统字体 如何为系统添加字体

如何为系统添加字体――简介系统自带的一些字体,有时候不能满足我们的办公生活需要,需要将一些字体添加到系统的文件库里面。如何为系统添加字体――工具/原料字体一个 电脑一台如何为系统添加字体――方法/步骤如何为系统添加字体

声明:《div添加图片 如何为一个div添加多个背景图片》为网友天空蓝分享!如侵犯到您的合法权益请联系我们删除