background

background: (1)url(image1.png) right bottom, (2)url(image2.png) center, (3)url(image3.png) (4)rgba( 0,0,0,0.35)

  • (1)The first background image. This is the image that is closest to the viewer. Every background image can have the general values of the background property, where the most important arebackground-position and background-repeat. By default they are positioned top left and get repeated at the x- and y-axis.第一张背景图是最靠近可视层的。每一个背景图都有通用的背景属性,最重要的是background-position和bckground-repeat。默认是定位在左上角,而且x与y轴重复。
  • (4)The general background color of the element. Can be only set last, no comma preceded.元素的背景颜色只能最后设置,没有逗号分隔。

background-clip

Sets the visible range of the background including background images.设置背景图片的有效范围

(1)border-box , (2)padding-box,(3)content-box

  • (1)By default the background of a box (element) is drawn beneath the border, that is the border covers it (= border-box, default value). To change this behaviour it’s possible
  • to use the values padding-box and content-box (Firefox 3.6 uses border and padding instead,content is not supported).元素默认的背景绘制在边框之下,也就是边框会覆盖背景层(默认值border-box)。可以使用paddng-box和content-box来改变这种行为。
  • (2)If a border is set the background starts directly within it, everything outside gets clipped. Same as the default value (border-box) when no border is set.如果在元素设置了边框,超出位置会被截取。即不会绘制到border之下。与不设置border的border-box一样效果。
  • (3)If a padding is set the background gets applied within it, everything outside is clipped. Same as padding-box when no padding is set, same as padding-box and border-box when no padding and no border are set.如果背景设置了padding,除了内容外都截取。与没有padding的padding-box一样,与没有设置padding和border的padding-box,border-box一样。

background-origin

(1)padding-box , (2)border-box,(3)content-box

  • (1) When background images are applied they directly start at the outer dimensions of the containing element (= padding-box, default value). In the presence of a border they start directly within it. Can also be content-box or border-box (Firefox 3.6 uses padding,content and border).当设置背景图片时,它是从元素的边界开始(默认是padding-box)。如果存在边框,则在边框内开始。还可以设置content-box和border-box。
  • (2)If a border is set it covers the background images. Same as padding-box when no border is set.如果设置了边框,而且设置border-box,边框就会覆盖在背景图上。如果没有设置边框则与padding-box一样。
  • (3)If a padding is set the background image gets applied within it. Same as padding-box when no padding is set, same as padding-box and border-box when no padding and no border are set.设置了content-box,如果设置了padding,背景图则应用于padding内。和没有设置padding的padding-box一样,和没有设置border与padding的botder-box、padding-box一样。

background-size

background-size:(1)50% 100%, (2)33% 33%, auto, 100px

  • The horizontal size of the background image, in this case 50% of the width of the element (not of the original image size). 第一个值50%是指背景图为元素宽度的50%(并不是原始图的尺寸)Can also be set in absolute (px) or relative (em) units, can be auto (original size, default),cover or contain. 也可以是px或者em,也可以是auto,cover和contain关键字。In combination with multiple background images the different values are separated by commas.多个背景图时用逗号隔开。(x y 当缺省状态则为auto,例如最后一个则是100px auto)

background-size: cover

  • The background image is resized so that either its width or height (the smaller one) covers the whole element. The aspect ratio is preserved.背景图会重置宽度或者高度(小者)以覆盖整个元素(必定保证整个元素被覆盖)。保留了长宽比。

background-size: contain

  • The background image is resized so that its width or height (the bigger one) fits inside the element. 背景图会重置以至于宽或高(大者)填满元素The aspect ratio is preserved.保留了长宽比。

原文:http://www.css3files.com/background/

css3之background的更多相关文章

  1. CSS3中background属性的调整

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

  2. css3 背景background

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

  3. css2和CSS3的background属性简写

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

  4. css3的Background新属性

    前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background ...

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

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

  6. [CSS3] CSS Background Images

    Body with background image and gradient html { background: linear-gradient(#000, white) no-repeat; h ...

  7. 巧用CSS3之background渐变

    常见斑马loading 上图是我们常见的loading进度条,以前都是用一张背景图片平铺的.其实如果抛去兼容性因素,我们可以用零图片纯样式来实现. 一,首先,我们先为容器定义一个纯蓝色背景: box{ ...

  8. css3 background

    background是一个很重要的css属性,在css3中新增了很多内容.一方面是原有属性新增了属性值,另一方面就是新增了3个属性. 一.css3中新增属性值介绍 css2的background有5个 ...

  9. CSS3详解:background

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

随机推荐

  1. ubuntu 下telnet 操纵memcache 实现

    memcache作为一款优秀的进程外缓存,常常被运用于高并发系统架构中.这里主要谈谈怎么通过telnet工具,查看memcache运行状况并对其key进行管理维护.假设memcache安装目录:/us ...

  2. CLR via C#字符串和文本处理

    一.字符   在.NET Framewole中,字符总是表示成16位Unicode代码值,这简化了国际化应用程序的开发.   每个字符都表示成System.Char结构(一个值类型) 的一个实例.Sy ...

  3. OpenStack镜像制作-CentOS

    云平台中镜像还是很重要的,提供各种定制化的镜像使得用户体验更好. 最开始玩OpenStack的时候用的是安装文档中提到的cirros,其密码cubswin:) 刚开始感觉很怪,现在已经可以随手打出.p ...

  4. Linux_install mod_ssl openssl apache

    1.下载 mod_ssl 和 apache 登入http://www.modssl.org/source/,下载 mod_ssl-2.8.31-1.3.41.targz: 2.8.31是mod_ssl ...

  5. Android系统源代码下载

    最近,我在研究android,所以想下载android源代码看看.按照http://source.android.com/source/downloading.html 这个页面所提示的步骤在下载源代 ...

  6. ural 1294 Mars Satellites

    #include <cstdio> #include <cstring> #include <cmath> #include <algorithm> u ...

  7. Linux下如何发布Qt程序

    在X11平台下qt程序,首先准备好程序中需要使用的资源,库和插件...    比如你的可运行程序取名叫作panel,那把你的panel,那些libQt*.so.4和libQt*.so.4.6.0(链接 ...

  8. CDN和双线机房相比有何优势

    1.什么类型的网站最需要CDN? 适合目标客户覆盖全国范围的网站,不论是南方电信.还是北方网通用户.铁通用户,均要求能快速访问到客户网站,彻底解决电信.网通之间的互访瓶颈. 另外国外的网站,如果需要提 ...

  9. ~/.bashrc的常用alias设置

    centos6.5系统中,alias定义在/etc/bashrc,分别写在/etc/profile.d/*.sh中,可以在此目录添加my.sh, alias attrib='chmod'alias c ...

  10. 【转】adobe acrobat pro修改pdf文字

    原文网址:http://zhidao.baidu.com/link?url=7MTeEu5IM49lNIISNQMcZLyLAwMPsRQWF5WAwQPfvkPsbbZLHSQE43MWaIxxVm ...