CSS3的诞生为我们解决了这一问题,在CSS3里,通过background-image或者background可以为一个容器设置多张背景图像,也就是说可以把不同背景图象只放到一个块元素里。

首先我们来看一下语法吧:

background : [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-attachment] | [background-position]

多个背景图片的url之间使用逗号隔开即可,如果有多个背景图片,而其他属性只有一个(例如background-repeat只有一个),那么所有背景图片都应用该属性值。

下面我们就看一个例子吧:

这里我们要使用5张图片作为一个div容器的背景,我们来看一下代码:

style{
.div1{
margin:50px auto;
width:700px;
height:450px;
border:10px dashed #ff00ff;
background-image:url(images/1.jpg),url(images/2.jpg),url(images /3.jpg),url(images/4.jpg),url(images/5.jpg);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
background-position:top left,top right,bottom left,bottom right,center center;
}
}
<div class="div1">
<a href="#" title="脚本之家">脚本之家</a>
</div>

在上面的代码中有这一句:

background-repeat:no-repeat;

写一个值就行了,效果是完全一样的。

当然上面设置背景图片的各个属性时是分开写的,那么我们也可以把背景图片的各个属性写在一块,这时的CSS代码如下:

代码如下:

.div1{

...

background:url(images/1.jpg) no-repeat top left,

url(images/2.jpg) no-repeat top right,

url(images/3.jpg) no-repeat bottom left,

url(images/4.jpg) no-repeat bottom right,

url(images/5.jpg) no-repeat center center;

...

}

CSS3实例分享之多重背景的实现(Multiple backgrounds)的更多相关文章

  1. CSS3背景图片(多重背景、起始位置、裁剪、尺寸)

    一.多重背景图片 ①CSS3允许我们在一个元素上添加多个图片 ②多重背景可以把多个图片资源添加到background属性上,用逗号隔开,然后用background-position把他们定位到你想要的 ...

  2. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  3. CSS3入门之边框与背景

    CSS3入门之边框与背景 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !im ...

  4. 《HTML5与CSS3实例教程》

    <HTML5与CSS3实例教程> 基本信息 作者: (美)Brian P. Hogan 译者: 卢俊祥 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:97871153634 ...

  5. CSS3系列三(与背景边框相关样式 、变形处理、动画效果)

    与背景相关的新增属性 大家都知道在HTML页面中,元素都是由以下几部分组成 使用background-clip来修改背景的显示范围,如果设定为border-box,则背景范围包含边框区域,如果设定为p ...

  6. Android经典项目开发之天气APP实例分享

    原文:Android经典项目开发之天气APP实例分享 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/mzc186/article/details/5 ...

  7. CSS3初学篇章_5(背景样式/列表样式/过渡动画)

    背景样式 1.背景颜色语法:background-color : transparent | color body { background-color:#CCCCCC;} 2.渐变色彩语法:back ...

  8. CSS 第四天 多重背景 变形 过渡

    背景原点:background-origin 图片起始位置 border-box包括边框 padding-box边框内 content-box 内容内 **background-repeat 为no- ...

  9. 免费手机号码归属地API查询接口和PHP使用实例分享

    免费手机号码归属地API查询接口和PHP使用实例分享 最近在做全国性的行业分类信息网站,需要用到手机号归属地显示功能,于是就穿梭于各大权威站点之间偷来了API的接口地址. 分享出来,大家可以用到就拿去 ...

随机推荐

  1. spring 整合 mybatis 中数据源的几种配置方式

    因为spring 整合mybatis的过程中, 有好几种整合方式,尤其是数据源那块,经常看到不一样的配置方式,总感觉有点乱,所以今天有空总结下. 一.采用org.mybatis.spring.mapp ...

  2. CentOS6.5 64位下安装部署Ansible

    这里使用的软件包为一下版本 Python-2.7.12.tgz pip-9.0.1.tar.gz ansible-2.2.0.0.tar.gz 其他依赖包使用pip方式安装 方便说明做以下设定: 控制 ...

  3. Android设计开发笔记

    1.因为Android的开发是基于框架的开发:往对方指定的位置加代码:其运行的Message\Handler机制也决定了其单步跟踪也不方便,所以建立新代码时要多Log,这样不但便于调试,而且帮助你加深 ...

  4. 【Java入门提高篇】Day16 Java异常处理(下)

    今天继续讲解java中的异常处理机制,主要介绍Exception家族的主要成员,自定义异常,以及异常处理的正确姿势. Exception家族 一图胜千言,先来看一张图. Exception这是一个父类 ...

  5. ArrayList源码分析超详细

    ArrayList源码分析超详解 想要分析下源码是件好事,但是如何去进行分析呢?以我的例子来说,我进行源码分析的过程如下几步: 找到类:利用 IDEA 找到所需要分析的类(ztrl+N查找ArraLi ...

  6. 解决0% [Waiting for headers] 导致的unable to lock the administration directory (/var/lib/dpkg/) is another process using it

    这是我在配置vim的YouCompleteMe时遇到的问题,我需要使用CMake来编译YCM. 在我输入 $ sudo apt install cmake 由于网络原因导致安装一直卡在0% [Wait ...

  7. c# 事件和EventManager

    事件 基本用法 关键字event,声明格式为: public event <委托类型> <事件对象> 事件的处理方法:适用于该委托的方法 数据的触发: 绑定同类事件,绑定时,可 ...

  8. Java (六、String类和StringBuffer)

    Java String 类 字符串广泛应用 在Java 编程中,在 Java 中字符串属于对象,Java 提供了 String 类来创建和操作字符串. 创建字符串 // ==比较的是字符串在栈中存放的 ...

  9. 关于 JavaScript 中的复制数组

    之前在写扫雷的时候,因为需要用到二维数组,当时就在复制数组这里出现了问题,所以记录一下. 当我们在需要复制数组的时候一定需要注意,数组是复合的数据类型,直接复制的话,只是复制了指向底层数据结构的指针, ...

  10. const用法体会

    const三个原则: 第一,如果你参数里面的变量在函数体内不改变,那么把该参数定义成const... : 第二,如果你的函数不会改变类里面的成员变量,把该函数定义成const成员函数,Eg: int ...