multiple backgrounds

多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。

语法缩写如下：

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

可以把上面的缩写拆解成以下形式：

background-image:url1,url2,...,urlN;

background-repeat : repeat1,repeat2,...,repeatN;

backround-position : position1,position2,...,positionN;

background-size : size1,size2,...,sizeN;

background-attachment : attachment1,attachment2,...,attachmentN;

background-clip : clip1,clip2,...,clipN;

background-origin : origin1,origin2,...,originN;

background-color : color;

注意：

  1. 用逗号隔开每组 background 的缩写值；
  2. 如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
  3. 如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
  4. background-color 只能设置一个。

举例：

有三张单独的图片：

使用多背景技术实现：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>多重背景</title>

<style type="text/css">

.demo{

    width: 300px;

    height: 140px;

    border: 1px solid #999;

    background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),

                      url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),

                      url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);

    background-position: left top, 100px 0, 200px 0;

    background-repeat: no-repeat, no-repeat, no-repeat;

    margin:0 0 20px 0;

}

.task {

    width: 300px;

    height: 140px;

    border: 1px solid #999;

    background:url(http://static.mukewang.com/static/img/logo_index.png) no-repeat,

               url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;

    background-position: left top, 200px 50px;

}

</style>

</head>

<body>

<div class="demo"></div>

<div class="task"></div>

</body>

</html>

multiple backgrounds的更多相关文章

  1. multiple backgrounds 多重背景

    语法缩写如下: background : [background-color] | [background-image] | [background-position][/background-siz ...

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

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

  3. 【Multiple backgrounds】用CSS3实现网页多重背景

    对于背景属性background-image大家应该已经很熟悉了,在CSS2中与它相关的属性还有background-repeat(设置背景是否重复及重复的方式).background-positio ...

  4. CSS3 Backgrounds相关介绍

    CSS3 Backgrounds相关介绍 1.背景图片(background images)是在padding-box的左上角落脚安家的,我们可以使用background-position属性改变默认 ...

  5. 翻译 – CSS3 Backgrounds相关介绍——张鑫旭

    —————以下为翻译内容—————- CSS2.1中有5个background属性可以用来控制元素的背景.这5个属性是: background-color background-image backg ...

  6. CSS3总结

    1.圆角效果 border-radius: 1px 1px 1px 1px; /* 四个半径值分别是左上角.右上角.右下角和左下角.顺时针 */  右边半圆 div.right-circle{ hei ...

  7. CSS3知识点整理&&一些demo

    css3能做什么 响应式开发的基础,然后能实现一些酷炫的效果咯. 以下案例纯css3实现,一点都没用js (入门简单,但是水很深) 叮当猫纯用css3做出         http://codepen ...

  8. ::before和::after伪元素的用法

    一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:focus. 常见伪元素——::first-let ...

  9. 一行代码解决ie6,7,8,9,10兼容性问题

    "浏览器模式"."文档模式"选项的区别如下: 1."浏览器模式"用于切换IE针对该网页的默认文档模式.对不同版本浏览器的条件备注解析.发送给 ...

随机推荐

  1. Android OptionMenu

    1.Java package com.fish.helloworld; import android.app.Activity; import android.content.Context; imp ...

  2. PUTTY使用Ctrl+s僵死的问题

    算是分享个小经验吧! 一直都是使用VM+PUTTY的方式调试Linux程序,有时候在Vi中编辑了程序,Windowns下旧习难改,顺手就Ctrl+s了,尽管我知道Vi的保存是:w. 很不幸这时的PUT ...

  3. ADO.NET中的DataSet和DataAdapter

    DataSet和DataTable DataSet是一个数据集合,存储在内存中,算是一个临时的数据库. 个人觉得,不是太常用了,DataTable或者直接用List<model>存数据比这 ...

  4. python yield用法举例说明

    1  yield基本用法 典型的例子: 斐波那契(Fibonacci)數列是一个非常简单的递归数列,除第一个和第二个数外,任意一个数都可由前两个数相加得到.1 2 3 5 8…… def fab(ma ...

  5. POJ C程序设计进阶 编程题＃5：细菌分组实验

    编程题#5:细菌实验分组 来源: POJ (Coursera声明:在POJ上完成的习题将不会计入Coursera的最后成绩.) 注意: 总时间限制: 1000ms 内存限制: 65536kB 描述 有 ...

  6. MapReduce作业的map task和reduce task调度参数

    MapReduce作业可以细分为map task和reduce task,而MRAppMaster又将map task和reduce task分为四种状态: 1.pending:刚启动但尚未向reso ...

  7. js数组的内部实现,迭代器,生成器和内包

    js内部实现 在js以外的很多语言中,数组将会隐式占用一段连续的内存空间.这种隐式的内部实现,使得高效的内存使用及高速的元素方法称为可能,而 在javascript中,数组实体是一个对象,所以通常的实 ...

  8. PHP-Fcgi下PHP的执行时间设置方法

    昨天,一个程序需要导出500条数据,结果发现到150条是,Nginx报出504 Gateway Timeout错误,原来PHP-Fcgi下的设置执行时间与isapi的不同     一般情况下设置PHP ...

  9. dedecms5.7 联动类型无法显示

    dedecms5.7 联动类型无法显示 问题原因:一般是由于路径问题( 路径缺少分隔符'/' )导致js无法正常加载 如果遇到该类问题,尝试通过firebug工具检查js是否被正确加载. 如果是路径问 ...

  10. C语言-L Buffer is too small && 0 解决方法

    问题如下: 问题出在程序语句(见下): 其中,字符串p1和p2分别指向某个字符串,p是定义的一个字符数组.问题出现在对strlen()的使用,这个函数计算的字符串长度是不包括'\0'的,所以在设置第二 ...