CSS3实例分享之多重背景的实现(Multiple backgrounds)

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容器的背景，我们来看一下代码：

HTML代码：

代码如下:

<div class="div1">
    <a href="#" title="我们">我们</a>
</div>

CSS代码：

代码如下:

.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;
}

效果如下图：






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

代码如下:

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多种背景就是这么回事儿，很简单吧。下面提供了完整的源码及示例，可以作为一个参考。

赞 (0)

相关推荐

  • CSS可以做的几个令你叹为观止的实例分享

    在我写"你未必知道的JavaScript和CSS交互的5种方法"一文时,人们对于JavaScript和CSS是如何重叠的感到惊讶.今天,我将重点强调你能用CSS完成的7种工作--不需要通过JavaScript或图片. CSS@supports 在使用一些浏览器可能没有的特性时,每一个优秀的前端开发者都需要进行特性测试.特性测试一直以来都是由JavaScript来做的,许多人使用Modernizr,一个由许多测试良好的案例构成的优秀实用工具,来做特性测试.一个新API:@supports

  • 你未必知道的JavaScript和CSS交互的5种方法

    随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作.我们的网页中都有.js文件和.css文件,但这并不意味着CSS和js是独立不能交互的.下面要讲的这五种JavaScript和CSS共同合作的方法你也许未必知道! 用JavaScript获取伪元素(pseudo-element)属性 大家都知道如何通过一个元素的style属性获取它的CSS样式值,但能获取伪元素(pseudo-eleme

  • CSS3实例分享之多重背景的实现(Multiple backgrounds)

    CSS3实例分享之多重背景的实现(Multiple backgrounds)

    CSS3的诞生为我们解决了这一问题,在CSS3里,通过background-image或者background可以为一个容器设置多张背景图像,也就是说可以把不同背景图象只放到一个块元素里. 首先我们来看一下语法吧: background : [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-attachment]

  • Spring集成MyBatis完整实例(分享)

    Spring集成MyBatis完整实例(分享)

    为了梳理前面学习的<Spring整合MyBatis(Maven+MySQL)一>与<Spring整合MyBatis(Maven+MySQL)二>中的内容,准备做一个完整的示例完成一个简单的图书管理功能,主要使用到的技术包含Spring.MyBatis.Maven与MySQL等.最后的运行效果如下: 项目结构如下: 一.新建一个基于Maven的Web项目 1.1.创建一个简单的Maven项目,项目信息如下: 1.2.修改层面信息,在项目上右键选择属性,再选择"Project

  • php写app接口并返回json数据的实例(分享)

    第一步:conn.PHP文件,用于连接数据库并定义接口格式,代码如下: <?php header("charset=utf-8"); $servername="localhost"; $username="root"; $password="root"; $dbname="test"; $conn = mysql_connect($servername,$username,$password); if

  • Python爬虫DOTA排行榜爬取实例(分享)

    Python爬虫DOTA排行榜爬取实例(分享)

    1.分析网站 打开开发者工具,我们观察到排行榜的数据并没有在doc里 doc文档 在Javascript里我么可以看到下面代码: ajax的post方法异步请求数据 在 XHR一栏里,我们找到所请求的数据 json存储的数据 请求字段为: post请求字段 2.伪装浏览器,并将json数据存入excel里面 获取信息 将数据保存到excel中 3.结果展示 以上这篇Python爬虫DOTA排行榜爬取实例(分享)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

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

    免费手机号码归属地API查询接口和PHP使用实例分享 最近在做全国性的行业分类信息网站,需要用到手机号归属地显示功能,于是就穿梭于各大权威站点之间偷来了API的接口地址. 分享出来,大家可以用到就拿去呵. 一.淘宝网API 复制代码 代码如下: API地址: http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=15850781443 参数: tel:手机号码 返回:JSON 二.拍拍API 复制代码 代码如下: API地址: http

  • nodeJS实现简单网页爬虫功能的实例(分享)

    nodeJS实现简单网页爬虫功能的实例(分享)

    本文将使用nodeJS实现一个简单的网页爬虫功能 网页源码 使用http.get()方法获取网页源码,以hao123网站的头条页面为例 http://tuijian.hao123.com/hotrank var http = require('http'); http.get('http://tuijian.hao123.com/hotrank',function(res){ var data = ''; res.on('data',function(chunk){ data += chunk;

  • 获取url中用&隔开的参数实例(分享)

    例如,当前网页中的url为https://www.baidu.com?a=111&b=222 想要获取url中的a,b参数,代码如下: function getParmFormUrl(name){ var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(re

  • JavaScript中Require调用js的实例分享

    在我最初开始写 JavaScript 函数时,通常是这样的: function fun1() { // some code here } function fun2() { // some other code here } ... 函数全写在全局环境中,项目很小时,通常不会有什么冲突问题. 但代码多了后,渐渐就发现,函数名称(英文词汇)有点不够用了.于是引入命名空间的概念,开始模块化代码. 命名空间下的函数 在命名空间下,我的代码这样写: var com = com || {}; com.zf

  • Java Servlet简单实例分享(文件上传下载demo)

    项目结构 src com servletdemo DownloadServlet.java ShowServlet.java UploadServlet.java WebContent jsp servlet download.html fileupload.jsp input.jsp WEB-INF lib commons-fileupload-1.3.1.jar commons-io-2.4.jar 1.简单实例 ShowServlet.java package com.servletdem

  • JS全角与半角转化实例(分享)

    最近在做PC端网站的页面的一个表单校验,需要把全角输入转化成半角符号.之前没有了解过这些编码的知识,还是得Google一下查查资料,故简单总结一下. 什么是全角.半角 传统上,英语或拉丁字母语言使用的电脑系统,每一个字母或符号,都是使用一字节的空间(一字节由8比特组成,共256个编码空间)来储存:而汉语.日语及韩语文字,由于数量大大超过256个,故惯常使用两字节来储存一个字符.在使用等宽字体(如DOS.部分文字编辑器等)的环境下,中日韩文字此时占据两倍于西文字符的显示宽度.所以,中.日.韩等文字

随机推荐