css3之background
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 i
mportant are
background-position
andbackground-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
andcontent-box
(Firefox 3.6 usesborder
andpadding
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 aspadding-box
andborder-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 becontent-box
orborder-box
(Firefox 3.6 usespadding
,content
andborder
).当设置背景图片时,它是从元素的边界开始(默认是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 aspadding-box
andborder-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 beauto
(original size, default),cover
orcontain
. 也可以是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的更多相关文章
- CSS3中background属性的调整
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...
- css3 背景background
Css3背景<background> Css3包含多个新的背景属性,它们提供了对背景更强大的控制.可以自定义背景图的大小,可以规定背景图片的定位区域,css3还允许我们为元素使用多个背景图 ...
- css2和CSS3的background属性简写
1.css2:background:background-color || url("") || no-repeat || scroll || 0 0; css3: backg ...
- css3的Background新属性
前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background ...
- CSS背景和CSS3背景background属性
css背景属性用于定义HTML元素的背景 背景属性既可以为单个的单元设置背景,也可以为整个页面设置背景,可以对上述二者的任意组合设置背景,段落.文字.不同状态的链接.图像.内容区域修改其背景样式.设置 ...
- [CSS3] CSS Background Images
Body with background image and gradient html { background: linear-gradient(#000, white) no-repeat; h ...
- 巧用CSS3之background渐变
常见斑马loading 上图是我们常见的loading进度条,以前都是用一张背景图片平铺的.其实如果抛去兼容性因素,我们可以用零图片纯样式来实现. 一,首先,我们先为容器定义一个纯蓝色背景: box{ ...
- css3 background
background是一个很重要的css属性,在css3中新增了很多内容.一方面是原有属性新增了属性值,另一方面就是新增了3个属性. 一.css3中新增属性值介绍 css2的background有5个 ...
- CSS3详解:background
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...
随机推荐
- ubuntu 下telnet 操纵memcache 实现
memcache作为一款优秀的进程外缓存,常常被运用于高并发系统架构中.这里主要谈谈怎么通过telnet工具,查看memcache运行状况并对其key进行管理维护.假设memcache安装目录:/us ...
- CLR via C#字符串和文本处理
一.字符 在.NET Framewole中,字符总是表示成16位Unicode代码值,这简化了国际化应用程序的开发. 每个字符都表示成System.Char结构(一个值类型) 的一个实例.Sy ...
- OpenStack镜像制作-CentOS
云平台中镜像还是很重要的,提供各种定制化的镜像使得用户体验更好. 最开始玩OpenStack的时候用的是安装文档中提到的cirros,其密码cubswin:) 刚开始感觉很怪,现在已经可以随手打出.p ...
- 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 ...
- Android系统源代码下载
最近,我在研究android,所以想下载android源代码看看.按照http://source.android.com/source/downloading.html 这个页面所提示的步骤在下载源代 ...
- ural 1294 Mars Satellites
#include <cstdio> #include <cstring> #include <cmath> #include <algorithm> u ...
- Linux下如何发布Qt程序
在X11平台下qt程序,首先准备好程序中需要使用的资源,库和插件... 比如你的可运行程序取名叫作panel,那把你的panel,那些libQt*.so.4和libQt*.so.4.6.0(链接 ...
- CDN和双线机房相比有何优势
1.什么类型的网站最需要CDN? 适合目标客户覆盖全国范围的网站,不论是南方电信.还是北方网通用户.铁通用户,均要求能快速访问到客户网站,彻底解决电信.网通之间的互访瓶颈. 另外国外的网站,如果需要提 ...
- ~/.bashrc的常用alias设置
centos6.5系统中,alias定义在/etc/bashrc,分别写在/etc/profile.d/*.sh中,可以在此目录添加my.sh, alias attrib='chmod'alias c ...
- 【转】adobe acrobat pro修改pdf文字
原文网址:http://zhidao.baidu.com/link?url=7MTeEu5IM49lNIISNQMcZLyLAwMPsRQWF5WAwQPfvkPsbbZLHSQE43MWaIxxVm ...