翻译 – CSS3 Backgrounds相关介绍

标签: 默认 background background-clip background-origin background-size | 发表时间:2011-05-08 23:52 | 作者:张 鑫旭 小伟
出处:http://www.zhangxinxu.com/wordpress

by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=1618

小小引言

原课件内容如下:

就上周才出来的,个人觉得对于学习很有帮助,于是决定翻译下,不过作者似乎将下载功能关闭了,于是不能再原pdf文件上修改,不得已,自己就整了个长长的HTML版本的,也即是下面的些内容了。

—————以下为翻译内容—————-

CSS2.1中有5个background属性可以用来控制元素的背景。这5个属性是:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

为了更好的驾驭背景图片,CSS3添加了3个新的background相关属性,以及一系列的相关属性值。

不过在我们与这几个新属性亲密接触之前需要知道3个重要的盒子。

三个盒子

假设现在有个容器,容器里面有些内容,虽然我们看不见,但是这些内容的外面是有一个盒子的,这个盒子就是content-box

//zxx:这里的英文原文是:”The quick brown fox jumped over the lazy web developer. “,而实际上,这里的英文也不是最原始的,是作者从”The quick brown fox jumped over the lazy dog! “这句话改编而来的,至于这里的原话实际上没有什么特殊的意思,只是这句话包含了英文中全部的26个字母。这里,我按照字面意思整个了打油诗。

现在,如果我们给容器的每个边上增加padding,我们将会得到一个新的盒子,即padding-box

如果我们给容器的每个边边框上边框(这里断句如下:每个边边 框上 边框)。我们将会迎来第三个盒子——border-box

这三个盒子用来确定背景图片的落脚之处,以何种尺寸显示,以及哪个地方要修剪。

后面会专门花口水讲这三个盒子,但是,眼下,先揭开background-position以及background-repeat羞涩的面纱。

background-position

默认情况下,背景图片(background images)是在padding-box的左上角落脚安家的。如下图:

我们可以使用background-position属性改变默认的位置。

在CSS2.1中,我们可以使用两个值来决定背景图片相对于元素的位置。

其中第一个值决定了水平位置:

第二个值决定了垂直位置:

在CSS3中,我们可以给background-position属性指定高达4个值。

开始的两个值代表了水平轴:

后面的两个值代码垂直轴:

这是很强大的“装备”升级,这意味着我们可以相对于上下左右任意一个角落定位,而不是之前的只能相对于左上角定位。

正值和负值

我们可以使用正值决定背景图片的位置,也可以使用负值。

正值所产生的效果是把背景图片往右下方移动——元素背景区域内部。

负值产生的效用是把背景图片往左上方向移动——元素背景区域外面。

background-repeat

默认情况下,背景图片会沿着x轴,y轴重复。同样的,是起始于padding-box的左上角。尽管背景图片平铺起始于padding-box左上角,但是其从各个方向朝外面平铺,包括border区域。

在CSS2.1中,我们可以使用四个不同的关键字改变平铺的行为,如下:

  • repeat
  • repeat-x
  • repeat-y
  • no-repeat

repeat repeat?

在CSS3中,我们定义repeat的时候可以使用两个值代替一个值。

其中第一个值代表水平轴:

第二个repeat表示垂直轴:

如果我们只使用一个值,浏览器会自动解释成两个值。这就保证了background-repeat属性向后兼容。

使用”sapce”和”round”

CSS3允许我们使用background-repeat属性两个新值:spaceround。其兼容性如下表:

浏览器 space round
Firefox 3.6, Firefox 4 不支持 不支持
Safari 4, Safari 5 不支持 不支持
Chrome 10 不支持 不支持
IE6, IE7, IE8 不支持 不支持
IE9 不支持 不支持
Opera 10, Opera 11 支持 支持

space值的功效可以简单理解为图片的两端对齐平铺,多出来的空间用空白代替:

呈现效果大致如下:

round属性的效果也可以说是两端对齐,但其多出来空间通过自身的拉伸来填充。

呈现效果大致如下:

不过需要注意的是使用这种方法图片可能会被拉伸或扭曲。这些新值让我们在布局背景图片的时候更灵活了。例如我们可以使用两个值来定义不同的垂直和水平行为:

三个新属性

在CSS3中我们可以使用三个全新的属性,如下:

  • background-origin
  • background-clip
  • background-size

background-origin

关于CSS3 background-origin基础知识以及效果demo可以参见这里background-origin是用来决定背景图片定位在哪个盒子中。我们可以使用background-origin属性的三个值进行背景图片的定位,它们是:content-boxpadding-box以及border-box

兼容性如下表:

浏览器 background-origin
Firefox 3.6, Firefox 4 支持
Safari 4, Safari 5 支持
Chrome 10 支持
IE6, IE7, IE8 不支持
IE9 支持
Opera 10, Opera 11 支持

background-clip

关于CSS3 background-clip基础知识以及效果demo可以参见这里background-clip属性是用来决定在背景区域中背景图片剪裁的位置。其支持三个值,为:content-boxpadding-box以及border-box

兼容性如下表:

浏览器 background-clip
Firefox 3.6 见下面的备注说明
Firefox 4 支持
Safari 4, Safari 5 -webkit-background-clip
Chrome 10 支持
IE6, IE7, IE8 不支持
IE9 支持
Opera 10, Opera 11 支持

备注说明:Firefox 1.0 ~Firefox 3.6支持老的解析:borderpadding,但是并不支持content以及后来的content-box值。

background-size

关于CSS3 background-size基础知识以及效果demo可以参见这里

在CSS2.1中,我们是没有办法控制背景图片的大小的。然而,在CSS3中允许我们使用background-size属性来控制背景图片的大小。例如:

我们可以使用长度值或是百分比,或者是两个新的关键字:containcover

例如上图中的第一个值表示宽度,第二个值表示高度,如下示意:

如果只设置了一个值,那么第二个值会自动用初始值”auto“代替,如下图:

contain“值的效用是按比例将图片缩放到最大尺寸以使其高宽都在背景区域里面,其主要用在背景图片比容器大的情况下。需注意使用该值图片可能有扭曲。

div { background-size: contain; }

cover“值的效用是按比例将图片缩放到最小尺寸以使其完整覆盖背景区域,其主要用在背景图片比容器小的情况下。需注意使用该值图片可能有扭曲。

div { background-size: cover; }

background-size兼容性如下表:

浏览器 background-size
Firefox 3.6, Firefox 4 支持
Safari 4, Safari 5 支持
Chrome 10 支持
IE6, IE7, IE8 不支持
IE9 支持
Opera 10, Opera 11 支持

属性的缩写

有些CSS属性可以让我们合并书写,这样就不用太多行的声明。而background属性允许我们使用一条规则设置所有单独的背景属性。CSS2.1中解析:

CSS3中解析为:

理解初始值

如果你想使用缩写属性,你需要理解知道初始值。因为这些值有些可以应用,而有些可以当做打酱油的。当我们使用一个缩写的时候,没有必要定义所有的background属性,例如:

浏览器会自动添加我们实际上不需要的初始值:

具体这些初始值参见下表:

background-color transparent
background-image none
background-repeat repeat
background-attachment scroll
background-position 0% 0%
background-origin padding-box
background-clip border-box
background-size auto

当我们对同一个元素应用两个background规则的时候会发现有一个是不起作用的。

原因见下图:

现在,让我们谈论最激动人心的CSS3 backgrounds部分

多背景(Multiple backgrounds)

在CSS2.1中,任何HTML元素只能添加一张背景图片,然而,在CSS3中,我们可以给任意元素添加N张背景图片,关于该特性的基础知识及效果demo可以参见这里。该特性兼容性如下表:

浏览器 Multiple backgrounds
Firefox 3.6, Firefox 4 支持
Safari 4, Safari 5 支持
Chrome 10 支持
IE6, IE7, IE8 不支持
IE9 支持
Opera 10, Opera 11 支持

一般写法

CSS3允许我们给任意的background属性添加多个以逗号分隔的属性值,如下:

下面显示的是三张背景图更具体的例子:

每个图片的大小,定位,平铺都是根据其他背景属性想对应的值。如果逗号分隔的值比背景图片层要少,浏览器会拿使用过的列表中的值来充数来使分隔的值数目足够。背景图片以层的形式显示 – 第一个在其他之上。列表中的第一个图片是离用户最近的,而下一个图片会被渲染到第一个之后,以此类推。

所有的元素只能定义一个背景颜色,background-color所在的层被赋予为最底层,称之为“终极层(final layer)”。background-color层在所有的background-image层之下。

缩写

所有的这些背景属性都可以合并成单独的一行缩写。多背景图的缩写规则与单背景图是一致的,然后中间用逗号隔开。如下代码:

p {
	background:
        url (01.gif) no-repeat,    /*图片1*/
        url (02.gif) repeat left bottom,    /*图片2*/
        url (03.gif) repeat-y 10px 5px    /*图片3*/
}

与一般写法中一样,每个背景图片都是以层的形式显示,第一个在其他之上。

background-color和Multiple backgrounds

只有最底层,即所谓的“终极层”可以设置background-colorbackground-color只有设置在“终极层”上才能在让所有背景图显示。如果background-color值被添加到其他杂七杂八的层(不是“终极层”)上,那么整个规则将不会显示。background-color只能应用在终极层上,如下:

添加背景颜色比较安全的做法是使用独立的background-color声明,如下:

关于一些复杂缩写

如果你想书写更为复杂的缩写,你需要注意一些浏览器的怪癖。//zxx:跳过一些理论下全部正确的属性缩写图,直接展示提出问题的那张图

如果完整按照上图的写法,在Safari 5, Firefox 4, Chrome 10下会有两个问题。一是这些浏览器不认识缩写规则中前斜杠,如果有这玩意,这些浏览器会直接忽视整个声明;而是这些浏览器不认识缩写规则中两个盒子值(originclip)的使用,如果有这玩意,这些浏览器会直接忽视整个声明。

因此,就目前而言,缩写最好用在不太复杂的声明上。但是如果你想包含全部的7个属性,还是使用一般写法代替为妙。

Multiple backgrounds和渐变

要有这种意识:渐变是一种代码生成的图片。他们可以使用url()值来代替。这就意味着你可以在多背景中使用渐变,例如下面展示:

Multiple backgrounds和指定前缀扩展

如果你在多背景中添加前缀属性会怎样的?浏览器会无视其不认识的CSS,因而,这里整行声明都不起作用。私有的前缀属性只能被特定的浏览器识别,我们不能再同一个声明中添加浏览器私有前缀,因为浏览器会忽视整个声明,这就意味着我们不得不为每个特定的前缀属性写个background属性。所有其他的背景图片都必须包含在每一个声明中。例如:

原作者:Russ Weakley
翻译编辑:张鑫旭

不属于翻译内容的结语

文中一些重复的图片已省掉了,图文均有编辑。时间仓促,资历有限,文中难免会有翻译或表述不准确的地方,欢迎指正,欢迎交流。

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=1618

(本篇完)

有话要说,点击这里发表评论。

相关 [翻译 css3 backgrounds] 推荐:

翻译 – CSS3 Backgrounds相关介绍

- 小伟 - 张鑫旭-鑫空间-鑫生活
本文地址:http://www.zhangxinxu.com/wordpress/?p=1618. CSS3 Backgrounds 查看更多Russ Weakley的课件. 就上周才出来的,个人觉得对于学习很有帮助,于是决定翻译下,不过作者似乎将下载功能关闭了,于是不能再原pdf文件上修改,不得已,自己就整了个长长的HTML版本的,也即是下面的些内容了.

css3 变形

- - 博客园_Ruby's Louvre
CSS3从IE滤镜偷窍过来的创意,但易用性明显提高了许多. 利用这个,我们可以对某个元素进行旋传,缩放,倾斜与位移,并且区分元素类型,无论对块状元素还是内联元素都有效. rotateX(angle) 单独设定 rX 轴的角度. rotateY(angle) 单独设定 rY 轴的角度. rotateZ(angle) 单独设定 rZ 轴的角度.

CSS3 代码生成工具:Create CSS3

- - 我爱水煮鱼
CSS3 具有相当多的新增属性,而且包括阴影、动画、过渡等华丽的效果. 但是由于 CSS3 出来并没有很久,各个浏览器厂商还在开发中,有些属性仍然会带有实验性前缀. 而且类似制作动画、渐变的 CSS3 代码也相当复杂,一旦写错就会导致出现问题. 为此,有人开发了一个生成 CSS3 代码的工具 Create CSS3.

CSS3 文字渐变

- slackware - 前端观察
之前,我们有发表过CSS文字渐变效果,但是其实那并不是纯粹的基于CSS的渐变,它需要一张半透明渐变的png图片. 今天我们将介绍两种使用CSS3实现实现文字的方法. 嗯,只有webkit浏览器支持,请暂时无视其它浏览器. 在《CSS的未来:一些试验性CSS属性》中,我们提到了这个属性,相对于Firefox只能用svg做mask,webkit则灵活很多,图片和css3渐变均可.

用css3写个logo

- 丸子 - 崔凯,前端开发
演示地址:http://uicss.cn/css3/maxthon-logo.html. 先画一个外框 width: 240px; height: 240px;border-radius: 120px;. 填充背景色background:#b1e4ff;. 描边border:2px solid #789cb6;.

CSS3 pointer-events介绍

- Pstrey - 前端观察
其实早知道这个属性,但是一直没有去研究过. 今天正好在twitter看到这个词,就去研究了下,正好解决了目前遇到的一个小难题,所以分享下. 嗯,其实这是个比较简单的CSS3属性. 在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样的话,这些浮在上面的div或者其它元素一般都会给个宽高,或者relative的元素可以不给宽高,这个时候,这些元素就会盖住下面的地图层,以至于地图层无法操作.

HTML5 & CSS3 研究文档

- Kings - 幸福收藏夹
已经说了好久,一直没把这个文件夹分享出来. 这是我去年第四季度里做的,里面有 11 一个文档. 包括 HTML5 中最主要的 JS API 文档,还有 CSS3 中两个比较难的属性. 主要还停留在纯 API 层面上的研究,没有深入到应用中去. 不过,当做工具来使用,和入门文档,还是不错的. 特别是其中的 HTML5 JS API 文档.

纯CSS3透明水晶盒

- iVane - 前端观察
相信大家有看过这个例子:3D盒子,在书《CSS3 实战》上第282页有个综合实战“设计动态立体盒子”的例子,实现方式跟它一样,我的盒子也是以它为原型来设计的,不过在实现方面有做修改、优化,以及增添了一些细节,下面是我的盒子Firefox截图:. 透明化了盒子,通透性强了,因为透明了,所以背部的三个面也就要做出来了,所以总共6个面,比原作多3个;.

CSS3 基本要素概览

- yasy - 博客园-首页原创精华区
    这篇文章将对 CSS 的几个新属性 (text-shadow,box-shadow,and border-radius) 做基本介绍. 这些 CSS3 属性通常用来加强页面布局. 前面的 3 个值是 RGB 颜色值,最后一个值是透明度的级别(0 = 透明,1 = 不透明). RGBA 可以应用于与颜色的任何属性,如字体颜色,边框颜色,背景颜色,阴影颜色等.

CSS3动画-彩虹列表

- 蛋布丁 - 大猫の意淫筆記
昨天在微薄问了个 JScript 的问题, 李振文同学解答了一下,顺便摸过去,发现他的热门文章列表很淫荡. 于是抄袭了一个分享出来,嘿嘿. 要体验的同学可以用 chrome 在俺 blog 侧边里看到. 鼠标移上去的时候一个个亮起来,移走的时候慢慢消失掉. 颜色可以用 Photoshop 拉好渐变取色.