语法缩写如下：

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内核模块Makefile的解析

    转载:http://www.embeddedlinux.org.cn/html/yingjianqudong/201403/23-2820.html Linux内核是一种单体内核,但是通过动态加载模块 ...

  2. 基于linux2.6.38.8内核启动过程完全解析[一]

    转载: ************************************************************************************************ ...

  3. Linux Shell之top命令

    TOP是一个动态显示过程,即可以通过用户按键来不断刷新当前状态.如果在前台执行该命令,它将独占前台,直到用户终止该程序为止.比较准确的说,top命令提供了实时的对系统处理器的状态监视.它将显示系统中C ...

  4. sqoop1.99.4 JAVA API操作

    貌似天国还没有介绍1.99.4的java操作代码的,自己吃一次螃蟹吧 如果你是MAVEN项目 <dependency> <groupId>org.apache.sqoop< ...

  5. [Java] Eclipse+Spring学习（一）环境搭建

    转自:http://blog.sina.com.cn/s/blog_7c3736810100qhia.html 最近由于投了一家公司实习,他要java工程师,而我大学3年的精力都花到了ASP.NET和 ...

  6. [Java,MVC] Eclipse下搭建Spring MVC

    转自:http://blog.csdn.net/blue_jjw/article/details/8752466 一.新建Dynamic Web Project 一个web工程最基本的,只看3个地方, ...

  7. Callable--创建有返回值的线程

    转自:JAVA 笔记 Callable 与 FutureTask:有返回值的多线程 常用的Thread类在run方法执行完之后是没有返回值的,要实现子线程完成任务后返回值给主线程需要借助第三方转存.C ...

  8. python编写telnet登陆出现TypeError:'str' does not support the buffer interface

    python3支持byte类型,python2不支持.在python3中,telnet客户端向远程服务器发送的str要转化成byte,从服务器传过来的byte要转换成str,但是在python2不清楚 ...

  9. （转）Linux IO模式及 select、poll、epoll详解

    本文为转载,并作了部门调整.修改. [原文出处:https://segmentfault.com/a/1190000003063859] 同步IO和异步IO,阻塞IO和非阻塞IO分别是什么,到底有什么 ...

  10. oracle查看允许的最大连接数和当前连接数等信息

    目前总结的语句,在查看数据的连接情况很有用 ,写完程序一边测试代码一边查看数据库连接的释放情况有助于分析优化出一个健壮的系统程序来. 1.Sql代码1.select count(*) from v$p ...