怎样为一个div添加多个背景图片

以前,大家在制作页面的时候,一个div只能有一个背景图片。如果需要多个,就要新建元素,并设置z-index值,很是麻烦。现在最新推出的css3可以帮助我们解决这一问题。

操作方法

  • 01

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

  • 02

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

  • 03

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

  • 04

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

  • 05

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

  • 06

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

  • 07

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

(0)

相关推荐

  • wps演示ppt添加透明化的背景图片?

    教大家使用wps演示软件给自己的ppt加透明化的背景图片 1.打开wps演示软件 2.选择设计 3.再选择背景 4.这里不选择把背景图片另存,直接选择背景 5.出现属性修改窗口,在对象属性里面选择图片 ...

  • div 怎么设置背景图片

    这里小编主要用到CSS的一些属性,小编做前端时也是经常用到设置背景图片的问题,那么小编说一些自己常用的方法 操作方法 01 首先创建一个html文件一个css样式表文件,如图 02 在html文件中创 ...

  • 怎样在android中添加背景图片?

    android软件开发中,添加合适的背景图片,会使效果更好.但是,如何添加背景图片呢,下面是具体步骤.做好后的效果就相当于这样. 步骤/方法 01 打开你的安卓开发软件. 02 新建一个工程.例如工程 ...

  • Excel怎么插入背景图片_Excel如何添加背景图?

    很多时候我们在编辑文档.表格的时候需要插入背景图片.今天,小编就以Microsoft Office 2016(微软的office软件)为例来给大家介绍下怎么在Excel中插入背景图片.(效果图如下:) ...

  • blender背景图片不显示该怎么办?

    blender场景添加背景图片一般是为了根据图片创建模型而用的,如果发现背景图片不显示可能是有这些地方没注意. 1.blender打开自己的模型. 2.按“N”键,调出右边的属性面板. 3.展开里面的 ...

  • 在白板中如何设置背景图片?

    许多小伙伴都会在白板软件中教学,如果我们想要在软件中更换背景图片应该如何操作呢?今天,小编就教大家在白板中如何设置背景图片.具体如下:1. 首先打开电脑中的白板软件,如图.2. 然后点击右上角的[页面 ...

  • div+css如何实现背景图半透明文字内容不透明?

    在进行div+css进行页面处理的时候会出现很多问题,特别是在使用背景色的时候,如果图片背景颜色太深不适合做背景.本文从对背景图片进行半透明处理,讲一下css的作用. 操作方法 01 我们这里主要是为 ...

  • div怎么设置背景图片

    div是html中的基础元素之一,运用div的时候,为了美观经常会给它添加背景图片.下面小编就给大家分享一下如何给div添加背景图片. 操作方法 01 首先我们打开sublime text软件,新建一 ...

  • 如何在word中添加背景图片及背景颜色的教程

    word是我们经常办公需要用的办公软件,但是有的时候。因工作需要,我们需要为word文档添加一个背景的效果,达到一个视觉感观的体验。我们可以用来制造漂亮的背景图片或者为文本文档添加图片,这让读者在看这 ...