语法缩写如下:

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. ASP.NET 验证码控件

    public class ValidateCode : WebControl { /// <summary> /// 默认构造函数,暴露的属性接口 /// </summary> ...

  2. 从KRE到XRE:ASP.NET 5中正在消失的那些K

    前几天写了篇博客ASP.NET 5中的那些K,刚把ASP.NET 5中的那些K搞明白了些,昨天发现微软正在让那些K消失. 首先是在 KRuntime 的git日志中发现的: * Runtime ren ...

  3. SpringMVC对日期类型的转换

    在做web开发的时候,页面传入的都是String类型,SpringMVC可以对一些基本的类型进行转换,但是对于日期类的转换可能就需要我们配置. 1.如果查询类使我们自己写,那么在属性前面加上@Date ...

  4. Lamp源码搭建

    Lamp Centos6.5 + Apache/2.2.29 + PHP 5.3.29 + Mysql5.6.20 Apache(/usr/local/apache) PHP(/usr/local/b ...

  5. Akka官方文档翻译:Cluster Specification

    参加了CSDN的一个翻译项目,翻译Akka的文档.CSDN提供的翻译系统不好使,故先排版一下放在博客上. 5.1 集群规范 注意:本文档介绍了集群的设计理念.它分成两部分,第一部分描述了当前已经实现的 ...

  6. PHP搭建(windows64+apache2.4.7+mysql-5.6+php5.5)

    现在大部分一键安装包多是32位的,并不支持64位,直接在64位的系统上使用会报错的,所以我这里就来说说windows 64位系统如何建立Apache+PHP+MySQL环境的! 我这里演示用的wind ...

  7. HDU 5054 Alice and Bob

    #include <cstdio> int main(){ int n,m,x,y; while(~scanf("%d%d%d%d",&n,&m,&am ...

  8. 数据结构与算法(c++)——跳跃表(skip list)

    今天要介绍一个这样的数据结构: 单向链接 有序保存 支持添加.删除和检索操作 链表的元素查询接近线性时间 ——跳跃表 Skip List 一.普通链表 对于普通链接来说,越靠前的节点检索的时间花费越低 ...

  9. Maven集成dubbo时报错 Missing artifact com.alibaba:dubbo:jar:2.8.4

    1.下载dubbo,地址:https://github.com/dangdangdotcom/dubbox . 2.将下载的压缩包解压. 3.命令行进入下载路径,执行mvn install -Dmav ...

  10. Session使用(14)

    用session统计某个网页的访问人数(因为我还不会js,所以就做了个简易版本的) 1.创建Session监听器,每创建了一个Session对象就执行监听类中·的sessionCreated方法. p ...