1、css2:background:background-color || url("") || no-repeat || scroll || 0 0;

   css3:  background: url("") || 0 0/cover || no-repeat || scroll || border-box || content-box || black;

CSS2中的Background属性:

   background: background-color || background-image || background-repeat || background-attachment || background-position;
也可以分解写成:
background-color: color值 || RGBA值;
background-image: url();
background-repeat: repeat || repeat-x || repeat-y || no-repeat;
background-attachment: scroll || fixed;
background-position: <length> || <per>

CSS3中的Background属性

   background: background-image || background-position/background-size || background-repeat || background-attachment || background-clip || background-origin || background-color
也可以分解写成:
background-image: url();
background-position: <length> || <per>
background-size: <length> || <per>
background-repeat: repeat || repeat-x || repeat-y || no-repeat;
background-attachment: scroll || fixed;
background-clip: padding-box || border-box || content-box;
background-origin: padding-box || border-box || content-box;
background-color: color值 || RGBA值;

这里有点特别需要注意,如果使用联写方式时,background-size需跟在background-position的后面,并用“/”隔着,即"background-position/background-size"。另外本人强烈建议CSS3中的Background属性不要全部联写,最好把CSS3中的属性拆分出来单独书写,因为他们在不同浏览器下需要加上自己的前缀,如:

   background: background-color || background-image || background-repeat || background-attachment || background-position;
background-size: <length> || <per>
background-clip: padding-box || border-box || content-box;
background-origin: padding-box || border-box || content-box;

后面三个最好在运用时按前面介绍的,把各自的私有前缀加上。重温了一次两种标准下的Backgroud后,就正式进入今天的主题CSS3的多背景。

CSS3 Multiple backgrounds从字面而知,CSS3的多背景,其主要作用就是给同一个元素设置多个背景图像,换句话说,就是在同一元素上可以设置除background-color外多个background的其它属性,因为一个元素只具备一个背景色,但自从有了CSS3后,可以让同一个元素同时具有多个背景图像,并可以给多个背景图像设置相同或不相同的background-(position||repeat||clip||size||origin||attachment)。前面几句可能归纳的有点拗口,不太好理解,后面大家可以通过具体的实例来增加对他的理解。此时或许有朋友会问,那这个多背景我们在样式中要写backgrouds还是一样的background呢?这个问题问得很好,在以前读书学英语时,复数往往会多一个“s”,那我在这里大声告诉大家,CSS3的多背景我们不使用“backgrounds”而是继续使用"backgroud",况且W3C也没有“backgrouds”,至于具体的语法如下所示:

  background : [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],*
也可以分解成:
background-image: url1,url2,...,urlN;
background-repeat: repeat1,repeat2,...,repeatN;
background-position: position1,position2,...,positionN;
background-size: size1,size2,...,sizeN;
backrgound-attachment: attachment1,attachment2,...,attachmentN;
background-clip: clip1,clip2,...,clipN;
background-origin: origin1,origin2,...,originN;
background-color: color;

取值说明:

1、background-image:此值用来设置元素的背景图片,可以使用相对地址或绝对地址索引背景图片,详细参考w3c的Background-image

2、background-repeat:此值用来设置元素的背景图片的平铺方式,其默认值为repeat,详细参考w3c的background-repeat

3、background-position:此值用来设置元素的背景图片的定位起点,其默认值为left top,详细参考w3c的background-position

4、background-size: 此值用来设置元素的背景图片的尺寸大小,其默认值为auto,详细参考《CSS3 Background-size》;

5、background-attachment:此值用来设置元素的背景图片是否为固定显示,其默认值为scroll,详细参考background-attachment

6、background-clip:此值用来控制元素的背景图片显示区域,其默认值为border-box,详细参考《CSS3 Background-clip》;

7、background-origin:此值用来控制元素的背景图片position的默认起始点,其默认值为padding-box,详细参考《CSS3 background-origin》;

8、 background-color: transparent; color: rgb(41, 180, 240); text-decoration: none; background-position: initial initial; background-repeat: initial initial;">background-color。

其中background-image需要多个,但多个图片之间使用逗号隔开,而其他属性可以选择一个或多个,如果有多个背景图片时,其他属性只有一个时,那么表示所有背景图片应用了相同的属性设置,但background-color只能设置一个,如果你设置多少background-color将是一种错误的语法设置。

css2和CSS3的background属性简写的更多相关文章

  1. CSS 背景图像 background属性简写

    background属性简写 background属性可以像margin padding属性一样,有简写方法,它的简写顺序是: background-color background-image ba ...

  2. CSS3中background属性的调整

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

  3. CSS背景和CSS3背景background属性

    css背景属性用于定义HTML元素的背景 背景属性既可以为单个的单元设置背景,也可以为整个页面设置背景,可以对上述二者的任意组合设置背景,段落.文字.不同状态的链接.图像.内容区域修改其背景样式.设置 ...

  4. 从零开始学 Web 之 CSS3(三)渐变,background属性

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. css常用的简写技巧_css background简写、css border 简写、css font属性简写等

    css样式中有很多简写方式,比如:设置背景,字体,边框,盒子等.我们都可以把css代码合并为一行,这篇文章将总结有哪些属性支持css简写. 1.背景background属性 background-co ...

  6. css3 常用的属性

    1.伪类选择符 Pseudo-Classes Selectors Selectors选择符 CSS Version版本 Description简介 E:link CSS1 设置超链接a在未被访问前的样 ...

  7. CSS background 属性

    CSS 参考手册 实例 如何在一个声明中设置所有背景属性: body { background: #00FF00 url(bgimage.gif) no-repeat fixed top; } 亲自试 ...

  8. css shorthand属性简写

    一.什么是shorthand 属性简写(shorthand)就是一次性声明一组相关的属性.好处呢当然是众所周知的,让css从臃肿无序升级为简洁有效具有高可读性. 大多数的人都使用属性简写,我也用,但是 ...

  9. css属性简写集合

    作为一个前端攻城狮,CSS那绝对是基础,可是基础也有掌握不牢的时候.今天就来总结一下容易写错的CSS属性简写问题. 1.background 背景颜色:background-color         ...

随机推荐

  1. LigerUI+MVC的应用1

    [项目开发]LigerUI+MVC的应用(一) 近期因为稍微空闲有点时间,就晚上回家自己在随便写写代码,也就边写边记,中间主要采用了微软的MVC4.0框架.虽然目前公司也是使用的MVC的模式,但是因为 ...

  2. 自定义ModelValidatorProvider

    MVC数据验证原理及自定义ModelValidatorProvider实现无编译修改验证规则和错误信息 Asp.net MVC中的提供非常简单易用的数据验证解决方案. 通过System.Compone ...

  3. Object-c学习之路六(oc字符串文件读写)

    // // main.m // NSString // // Created by WildCat on 13-7-25. // Copyright (c) 2013年 wildcat. All ri ...

  4. 把事务封装成类似Serializable用法的特性

    把事务封装成类似Serializable用法的特性 最近几天上班没事可做就想着整理常用的类库方法,验证.消息.分页.模版引擎.数据库操作.ini操作.文本操作.xml操作等,最后就是现在这个事务特性. ...

  5. 依赖倒置原则DIP(面向接口编程—OOD)

    含义: 1.高层模块不应该依赖底层模块,两者都应该依赖其抽象. 2.抽象不应该依赖细节. 3.细节应该依赖抽象. 底层模块:不可分割的原子逻辑. 高层模块: 原子逻辑的再组装. 抽象:接口或者抽象类, ...

  6. 我的Emacs折腾经验谈(二) Emacs上手难的原因

    既然之前说过要写我怎么继续折腾Emacs的,过了一个星期这里就是第二篇了,突然觉得我把blog这样分节不是很好,每次可能要凑一些东西才有该有的篇幅,而且说的东西可能东一点西一点,这样一篇看下来不利于检 ...

  7. EF-Code First(5):二级缓存

    EF-Code First(5):二级缓存 〇.目录 一.前言 二.缓存设计 (一) 引用EFProviderWrappers (二) 缓存代码分析及整合 1. 关键代码简介 2. 应用缓存扩展 三. ...

  8. Asp.net Mvc4默认权限详细(上)

    Asp.net Mvc4默认权限详细(上) 前言 上篇的菜鸟去重复之Sql的问题还没有得到满意的答案.如果哪位大哥有相关的资料解释,能够分享给我,那就太谢谢了. 以后每发表一篇博文我都会将以前遗留的问 ...

  9. 关于iOS 5 Could not instantiate class named NSLayoutConstraint错误

    因为使用Xcode 4.6.2,新建工程的时候SDK 6.1,但是要做低版本适配.在将iOS模拟器选为5.0编译运行时候出现Could not instantiate class named NSLa ...

  10. Android仿人人客户端(v5.7.1)——新鲜事之完整篇

    转载请标明出处: http://blog.csdn.net/android_ls/article/details/9228083       声明:仿人人项目,所用所有图片资源都来源于其它Androi ...