一、常用基本属性:

  1. background-color:transparent || <color>        常用颜色格式有:颜色名、rgb、hls、十六进制、rgba、hlsa。
  2. background-image:none || <url>     url可以是相对地址,可以是绝对地址。
  3. background-repeat:repeat || repeat-x || repeat-y || no-repeat。
  4. background-attachment:scroll || fixed。    默认值为scroll,表示图片随页面滚动。fixed表示页面固定,只能用于html或body标签上,使用在其它标签无效果。
  5. background-position:<percentage> || <length> ||[left | center | right] [,top | center | bottom] 。当使用百分比时,应当是总宽/高度减去图片宽/高度加上padding值的和的百分比。

二、css3背景相关新增属性:

  1. background-origin:padding-box || border-box || content-box。新版本浏览器语法。使用时需要加私有前缀。
    padding-box:默认值。决定background-position的起始位置从padding的外边缘开始。
    border-box:从border外边缘开始显示。
    content-box:从padding的内边缘,即content的外边缘开始显示。
  2. background-clip:padding-box || border-box(默认值) || content-box。使用时需要加前缀
       在css2.1至css3中,背景在整个盒模型中,它布满整个元素的盒子区域,只不过边框部分遮住了部分background。
       当background-repeat为no-repeat时,background-color从边框的左上角起到边框的右下角止。而background-image却从padding的左上角到border的右下角。
       当background-repeat为repeat时,background-color完全被background-image覆盖。而background-image从border的左上角到border的右下角。但是background-position的起点是从padding的边缘开始。
    SP:在webkit内核下,background-clip还有一个text属性,配合webkit私有属性text-fill-color:transparent可以制作背景图片填充文字效果。
  3. background-size:auto || length || percentage(根据元素宽度计算) || cover || contain(保持图像高宽比)
       在只取一个值的时候,第二个值相当于auto。
       background-size:cover配合background-position:center常用来制作满屏背景效果。

三、css的background可以设置多背景,用逗号隔开。background-color只能设置一个。

css3背景总结与解析的更多相关文章

  1. CSS3背景温故

    1.背景的五种基本属性background-color(背景颜色)background-image(背景图片)background-repeat(背景图片展示方式)background-attachm ...

  2. css3 背景记

    css3 背景 css背景主要包括五个属性: background-color background-color:transparent || <color> 用来设置元素的背景颜色,默认 ...

  3. CSS自学笔记(11):CSS3背景和边框

    CSS3 背景 在CSS3中新增了多个关于背景的属性,可以让我们对背景有了更多更好的操作,减少用第三方工具对背景图片进行修改美化. CSS3中主要是通过定义backgrounp中的各个属性来控制背景( ...

  4. 第七十九,CSS3背景渐变效果

    CSS3背景渐变效果 学习要点: 1.线性渐变 2.径向渐变 本章主要探讨HTML5中CSS3背景渐变功能,主要有两种渐变方式:线性渐变和径向 (放射性)渐变. 一.线性渐变 linear-gradi ...

  5. CSS3的使用方法解析

    自己过去有段时间使用CSS3开发过一些小的部件和效果,但是由于太久没有再次去使用,导致当自己再次去使用的时候我就需要去翻手册重新找一次然后按着方法使用才可以. 现在我就把这份CSS3的使用技巧展示给各 ...

  6. 从零开始学习前端开发 — 17、CSS3背景与渐变

    一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景 ...

  7. css3背景颜色渐变属性 兼容性测试基础环境为:windows系统;IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

    css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...

  8. [转]真正了解CSS3背景下的@font face规则

    本文转自:http://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/ by zhangxinxu from http:/ ...

  9. css3 背景background

    Css3背景<background> Css3包含多个新的背景属性,它们提供了对背景更强大的控制.可以自定义背景图的大小,可以规定背景图片的定位区域,css3还允许我们为元素使用多个背景图 ...

随机推荐

  1. 《Linux内核分析》 week6作业-Linux内核fork()系统调用的创建过程

    一.进程控制块PCB-stack_struct 进程在操作系统中都有一个结构,用于表示这个进程.这就是进程控制块(PCB),在Linux中具体实现是task_struct数据结构,它主要记录了以下信息 ...

  2. 安装beautifulsoup的奇怪问题

    以前用的python2.7,改成3.4以后就重新下载了beatifulsoup4.解压到c:\Python34后.在cmd界面执行python setup.py install安装完成后.想看看安装成 ...

  3. 【转】Debug和Release区别

    VC下Debug和Release区别 最近写代码过程中,发现 Debug 下运行正常,Release 下就会出现问题,百思不得其解,而Release 下又无法进行调试,于是只能采用printf方式逐步 ...

  4. 让一个Activity在开机后自动显示

    Activity本身不会在手机开机后自动运行的.但想让手机开机后就立刻做一些动作,需要使用广播接收器拦截手机开启广播,并在onReceive方法中完成相应的动作,如打开一个Activity. 广播接收 ...

  5. js中运算符的优先级

    不确定下面表达式的运算顺序? a>b?c:d+e a&&b==c 看看下表就清楚了,下表按优先级从最高到最低的列出,具有相同优先级按从左至右的顺序求值. 运算符 描述 . [] ...

  6. Google Noto Sans CJK 字体

    下载链接:https://code.google.com/p/noto/source/browse/third_party/noto_cjk 等自己安装完成,再来个体验说明.

  7. 实现Rsync同步Nginx前端配置

    近期,由于我们的阿里前端服务器频频受到恶意的流量攻击,导致前端NGINX进入黑洞而无法正常访问公司网站. 按之前的预计方法,采用加速乐及备用全配置前端的作法,将恶意短时流量攻击的损失时间降到最短.现将 ...

  8. IBM总裁郭士纳总结的四类人

    IBM总裁郭士纳总结的四类人, 您属于哪一种呢-欢迎就此话题发表评论 积极采取行动促使事件发生的人 被动接受所发生事件的人 对事件持旁观者心态的人 什么事都不关心的人

  9. java调优随记-java对象大小

    在java中,基本数据类型的大小是固定.但是java对象的大小是不固定的,需要通过计算. 在java中,一个空对象(没有属性和方法的对象)在堆中占用8byte,比如 Object obj = new ...

  10. Android UI 之TextView控件属性列表

    在网上收集到了TextView 的属性,在开发过程中还是挺有用的. android:autoLink 设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(non ...