语法缩写如下：

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. qregularexpression和qregexp的区别

    QRegularExpression 是Qt 5.0才引进的,相对于QRegExp,QRegularExpression class修复了很多bug,提高了效率,提供了对Perl的RegEx几乎全面兼 ...

  2. 【PHP代码审计】 那些年我们一起挖掘SQL注入 - 2.全局防护Bypass之UrlDecode

    0x01 背景 现在的WEB程序基本都有对SQL注入的全局过滤,像PHP开启了GPC或者在全局文件common.php上使用addslashes()函数对接收的参数进行过滤,尤其是单引号.遇到这种情况 ...

  3. 基于linux2.6.38.8内核zImage文件的自解压详解

    转载:http://blog.csdn.net/wavemcu/article/details/7270439 ******************************************** ...

  4. 在window平台搭建Qt开发环境(使用VS2008 IDE)

    一直用QT Creator(mingw)开发Qt应用程序,每次如果需要修改编译链接参数选项时,都要修改pro文件,而这个文件是基于文本的,每次都要记住这些选项参数名,如果在知道原理的情况下还记住这些字 ...

  5. 来自 Github 的图形化 Git 使用教程

    转载:http://www.linuxeden.com/html/news/20120628/126451.html 这是来自 Github 上对 Git 常用操作进行简短介绍以及可视化图形操作说明的 ...

  6. jquery 和 $

    而jQuery就是jQuery库提供的一个函数.(好像也不仅仅只是函数, 因为还有 $.ajax(options) 这样的使用,等同 jQuery.ajax(options)) 这个函数的作用是根据 ...

  7. JS Date对象扩展

    // 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1-4 个占 ...

  8. nodejs的mysql模块学习(八)关闭连接池

    关闭连接池 可以用pool.end()关闭连接池 pool.end(function (err) { // 所有的连接都已经被关闭 }); 当关闭之后pool将不可以getconnection()

  9. 在C#中使用NPOI2.0操作Excel2003和Excel2007

    Excel2003: #region Excel2003 /// <summary> /// 将Excel文件中的数据读出到DataTable中(xls) /// </summary ...

  10. MVC+easyui 完整实现

    学习mvc半月有余,趁几天假期,没事做就动手做一个完整的网站玩玩,顺便和上家公司的方法做个比较.页面引擎采用mvc自带的功能,建立视图,交给.net自带渲染出页面(对比:上家公司采用的第三方组件渲染的 ...