语法缩写如下：

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

注意：用逗号隔开每组background的缩写值；如果有size值，需要紧跟position并且用"/"隔开；分解写法时，background-color只能设置一个。

例如：

background:url(./image.jpg) no-repeat left top / 200px 70px,url(./image.jpg) no-repeat right bottom / 150px 60px;

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>多重背景</title>

<style type="text/css">

.demo {

    width: 300px;

    height: 140px;

    border: 1px solid #999;

    background:url(http://static.mukewang.com/static/img/logo_index.png) no-repeat left top / 200px 70px,

    url(http://static.mukewang.com/static/img/logo_index.png) no-repeat right bottom / 150px 60px;

}

</style>

</head>

<body>

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

</body>

</html>

multiple backgrounds 多重背景的更多相关文章

  1. multiple backgrounds

    multiple backgrounds 多重背景,也就是CSS2里background的属性外加origin.clip和size组成的新background的多次叠加,缩写时为用逗号隔开的每组值:用 ...

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

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

  3. css（字体，文本，边距，边框，阴影，背景，渐变，多重背景，列表）

    font-family 设置字体名称 可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:'宋体','黑体','Arial'; } font-size ...

  4. CSS Backgrounds（背景）

    CSS Backgrounds(背景) CSS 背景属性用于定义HTML元素的背景. CSS 属性定义背景效果: background-color background-image backgroun ...

  5. CSS3背景图片（多重背景、起始位置、裁剪、尺寸）

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

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

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

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

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

  8. css定义多重背景动画

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style typ ...

  9. CSS背景使用，引入、尺寸、平铺、定位、多重背景

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">      ...

随机推荐

  1. 向linux内核版本号添加字符/为何有时会自动添加“+”号

    转载:http://blog.csdn.net/adaptiver/article/details/7225980 1.   引子 编译2.6.35.7 kernel版本的时候发现,“2.6.35.7 ...

  2. 想了解JAVA的，看看（转载）

    较新一篇 / 较旧一篇 编辑 |删除 | 复制链接  公开 想了解JAVA的,看看(转载)2009-03-01 15:41 (分类:默认分类) 先总结一下: J2SE   (Core/Desktop) ...

  3. mysql避免插入重复数据

    我们在进行数据库操作的时候,有时候需要插入不重复的数据.所谓不重复的数据,可以是某个字段不重复,也可以是某几个字段重复.当然我们可以在插入之前先将数据库的数据查询出来,然后与将要插入的数据进行对比,如 ...

  4. 【Mood-7】tell 2 my gf-miss u not sudden but always

    #sorry not coming 2 see u the national day holiday! I'm BULL in the land,fighting 4 u and babies!  # ...

  5. iOS篇之有沙盒缓存

    内存指的就是主板上的存储部件,是CPU直接与之沟通,并用其存储数据的部件,存放当前正在使用的(即执行中)的数据和程序,它的物理实质就是一组或多组具备数据输入输出和数据存储功能的集成电路,内存只用于暂时 ...

  6. input[type='submit']input[type='button']button等按钮在低版本的IE下面，去掉黑色边框的问题

    今天做一个tabs效果的时候,发现上面的button在低版本下会出现黑色的边框,很难看,于是我整理了下几个去掉黑色边框的办法: 1.在button的外层嵌套一个div,设置button的border: ...

  7. 2000 Asia shanghai Dance Dance Revolution

    思路:dp[i][x][y]表示第i个序列中,右脚在x位置,左脚在y位置时,其最小花费. 那么dp[i][x][y]=min(dp[i-1][a[i]][y]+cost[a[i]][x],dp[i-1 ...

  8. Google Chrome 55 Released – Install on RHEL/CentOS 7/6 and Fedora 25-20

    Google Chrome is a freeware web browser developed by Google Inc. Google Chrome team proudly announce ...

  9. asp.net MVC dropList 绑定

    废话我就不多说了..上个图.给自己备忘一下

  10. IOS 支付宝、微信回调传值给H5网页

    这里用是的苹果原生和JS的交互 .有不明白JavaScriptCore框架的可以去网上搜索下这方面的资料很多废话不多说直接上代码 @protocol JSContextDelegate <JSE ...