知识屋:更实用的电脑技术知识网站
所在位置:首页 > 电脑技术

如何为一个div添加多个背景图片 一个div怎么添加多个背景图片详解

发布时间:2017-03-13 14:57:52作者:知识屋

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


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


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


如何为一个div添加多个背景图片 一个div怎么添加多个背景图片详解


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


如何为一个div添加多个背景图片 一个div怎么添加多个背景图片详解


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


如何为一个div添加多个背景图片 一个div怎么添加多个背景图片详解


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


如何为一个div添加多个背景图片 一个div怎么添加多个背景图片详解


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


如何为一个div添加多个背景图片 一个div怎么添加多个背景图片详解


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


如何为一个div添加多个背景图片 一个div怎么添加多个背景图片详解


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


如何为一个div添加多个背景图片 一个div怎么添加多个背景图片详解


  以上就是一个div添加多个背景图片的方法,希望可以帮助大家。


(免责声明:文章内容如涉及作品内容、版权和其它问题,请及时与我们联系,我们将在第一时间删除内容,文章内容仅供参考)
收藏
  • 人气文章
  • 最新文章
  • 下载排行榜
  • 热门排行榜