??xml version="1.0" encoding="utf-8" standalone="yes"?>
译文链接Q?a >css 背景全攻?/a>
转蝲请保留版权以?qing)链?/p>
—————————————————————————————?/p>
背景(background)是css中一个重要的的部分,也是需要知道的css的基知识之一。这文章将?x)涉及(qing)css背景 (background)的基本用法,包括诸如 background-attachment {的属性,也会(x)介绍一些有兌?background)的常用技巧,以及(qing) css3 中的 背景(background)(包含4个新的背?background)属??/p>
CSS2 中有5个主要的背景(background)属性,它们是:(x)
* background-color: 指定填充背景的颜艌Ӏ?/p>
* background-image: 引用囄作ؓ(f)背景?/p>
* background-position: 指定元素背景囄的位|?/p>
* background-repeat: 军_是否重复背景囄?/p>
* background-attachment: 军_背景图是否随面滚动?/p>
q些属性可以全部合qؓ(f)一个羃写属? background。需要注意的一个要Ҏ(gu)背景占据元素的所有内容区域,包括 padding ? borderQ但是不包括元素?margin。它?Firefox, Safari ,Opera 以及(qing) IE8 中工作正常,但是 IE6 ? IE7 中,background 没把 border 计算在内?/p>
background-color 属性用U色来填充背景。有许多方式指定q个颜色Q以下方式都得到相同的结果?/p>
background-color: blue;
background-color: #0000ff;
background-color: #0000ff;
background-color 也可被设|ؓ(f)透明QtransparentQ,q会(x)使得其下的元素可见?/p>
background-image 属性允许指定一个图片展C在背景中。可以和 background-color q用Q因此如果图片不重复地话Q图片覆盖不到地地方都会(x)被背景色填充。代码很单,只需要记住,路径是相对于样式表的Q因此以下的代码中,囄和样式表? 在同一个目录中的?/p>
background-image: url(image.jpg);
但是如果囄在一个名?images 的子目录中,应该是Q?/p>
background-image: url(images/image.jpg);
p伴西红柿:(x)使用 ../ 表示上一U目录,比如 background-image: url(../images/image.jpg); 表示囄位于样式表的上目录中的 images 子目录中。有点绕Q不q这个大家应该都知道?jin),我就不详说?jin)?/p>
讄背景囄Ӟ默认把图片在水^和垂直方向^Z铺满整个元素。这也许是你需要的Q但是有时会(x)希望囄只出Cơ,或者只在一个方向^铺。以下ؓ(f)可能的设|值和l果Q?/p>
background-repeat: repeat; /* 默认|在水q_垂直方向q铺 */
background-repeat: no-repeat; /* 不^铺。图片只展示一ơ?*/
background-repeat: repeat-x; /* 水^方向q铺(?x ? */
background-repeat: repeat-y; /* 垂直方向q铺(?y ? */
background-repeat: inherit; /* l承父元素的 background-repeat 属?/
background-position 属性用来控制背景图片在元素中的位置。技巧是Q实际上指定的是囄左上角相对于元素左上角的位置?br /> ? 面的例子中,讄?jin)一个背景图片ƈ且用 background-position 属性来控制它的位置Q同时也讄? background-repeat ?no-repeat。计量单位是像素。第一个数字表C?x ?水^)位置Q第二个?y ?垂直) 位置?/p>
/* ?1: 默认?*/
background-position: 0 0; /* 元素的左上角 */
/* ?2: 把图片向右移?*/
background-position: 75px 0;
/* ?3: 把图片向左移?*/
background-position: -75px 0;
/* ?4: 把图片向下移?*/
background-position: 0 100px;
background-position 属性可以用其它数|关键词和癑ֈ比来指定Q这比较有用Q尤其是在元素尺怸是用像素讄时?/p>
关键词是不用解释的。x 轴上Q?/p>
y 轴上:
序斚w和用像素值时的顺序几乎一P首先?x _(d)其次?y _(d)像这P(x)
background-position: top right;
使用癑ֈ数时也类伹{需要主要的是,使用癑ֈ数时Q浏览器是以元素的百分比数值来讄囄的位|的。看例子好理解?jin)。假设设定如下:(x)
background-position: 100% 50%;
This goes 100% of the way across the image (i.e. the very right-hand edge) and 100% of the way across the element (remember, the starting point is always the top-left corner), and the two line up there. It then goes 50% of the way down the image and 50% of the way down the element to line up there. The result is that the image is aligned to the right of the element and exactly half-way down it.
使用癑ֈ数定位时Q其实是背景图片的癑ֈ比指定的位置和元素的癑ֈ比位|对齐。也是_(d)癑ֈ数定位是改变?jin)背景图和元素的寚w基点。不再像使用 像素和关键词定位Ӟ使用背景囑֒元素的左上角为对齐基炏V例如上例的 background-position: 100% 50%; 是背景图片的 100%(right) 50%(center) q个点,和元素的 100%(right) 50%(center) q个点对齐?/p>
q再一ơ说明了(jin)Q我们一直认为已l掌握的单的东西Q其实还有我们有限的认知之外的知识?/p>
注意原点L左上角,最l的效果是笑脸图片被定位在元素的最双Q离元素剙是元素的一半,效果?background-position: right center; 一栗?/p>
background-attachment 属性决定用h动页面时囄的状态。三个可用属性ؓ(f) scroll(滚动)Qfixed(固定) ?inherit(l承)。inherit 单纯地指定元素承他的父元素?background-attachment 属性?/p>
Z(jin)正确地理?background-attachmentQ首先需要明白页?page)和视?view port)是如何协作地。视?view port)是浏览器昄|页的部?是L工具栏的览?。视?view port)的位|固定,不变动?/p>
当向下滚动网|Q视?view port)是不动的Q而页面的内容向上滚动。看h貌似视口(view port)向页面下Ҏ(gu)动了(jin)。如果设|?background-attachment: scrollQ就讄?jin)当元素滚动Ӟ元素背景也必需随着滚动。简而言之,背景是紧贴元素的。这?background-attachment 默认倹{?/p>
用一个例子来更清楚地描述下:(x)
background-image: url(test-image.jpg);
background-position: 0 0;
background-repeat: no-repeat;
background-attachment: scroll;
当向下滚动页面时Q背景向上滚动直x失?/p>
但是当设|?background-attachment ?fixed Ӟ当页面向下滚动时Q背景要待在它原来的位置(相对于浏览器来说)。也是不随元素滚动?/p>
用另一个例子描qCQ?/p>
background-image: url(test-image.jpg);
background-position: 0 100%;
background-repeat: no-repeat;
background-attachment: fixed;
面已经向下滚动?jin),但是囑փ仍然保持可见?/p>
需要重视的一Ҏ(gu)背景囑֏能出现在它父元素能达到的区域。即使图片是相对于视?view port)定位圎ͼ如果它的父元素不可见Q图片就?x)消失。参见下面的例子。此例中Q图片位于视?view port)的左下方Q但是只有元素内的图片部分是可见的?/p>
background-image: url(test-image.jpg);
background-position: 0 100%;
background-repeat: no-repeat;
background-attachment: fixed;
因ؓ(f)囄开始在元素之外Q一部分囄被切除了(jin)?/p>
可以把背景的各个属性合Z行,而不用每ơ都单独把他们写出来。格式如下:(x)
background: <color> <image> <position> <attachment> <repeat>
例如Q下面的声明
background-color: transparent;
background-image: url(image.jpg);
background-position: 50% 0 ;
background-attachment: scroll;
background-repeat: repeat-y;
可以合ؓ(f)单独一行:(x)
background: transparent url(image.jpg) 50% 0 scroll repeat-y;
而且不需要指定每一个倹{如果省略值地话,׃用属性地默认倹{例如,上面那行和下面这个效果一P(x)
background: url(image.jpg) 50% 0 repeat-y;
除了(jin)可以用来使元素更加优雅这cL然的用法之外Q背景也可以用于其它的目的?/p>
当?css ?float 属性来定位布局元素Ӟ要确保两栏或多栏有相同的长度是比较困隄。如果长度不同,其中一栏的背景?x)比另外的短Q这?x)破坏整个设计?/p>
仿栏是个非常单的背景技巧,q个技巧最早发表在A List Apart 。思\很简单:(x)不再l每列单独设|背景,而是l各列的父元素设|一个背景图。所有栏的设计都包含在这张图片之中?/p>
在网上Q对于字体的选择是相当有限的。可以?sIFR 之类的工h定制字体Q但是这需要用户启?JavaScript 。一个适用于Q意浏览器的简单方法是Q用想用的字体来做一张文本图片,q用q张囄作ؓ(f)背景。这P文本依然出现在文档标C以供搜烦(ch)引擎(g)索和屏幕览 器识别,但是在浏览器中就?x)显C首选的字体?/p>
例如QHTML 标记可能是这L(fng)Q?/p>
<h3>Blogroll</h3>
假如有一?200 ?75 的图片,上面有更好看的字体,可以用如下方式来替换文本:(x)
h3.blogroll {
width: 200px;
height: 75px; /* So that the element will show the whole image. */
background:url(blogroll-text.jpg) 0 0 no-repeat; /* Sets the background image */
text-indent: -9999px; /* Hides the regular text by moving it 9999 pixels to the left */
}
无需列表中的圆点看v来很隄。不用再处理所有不同的 list-style 属性,只需要简单地把他们隐藏ƈ用背景图代替可以了(jin)。因为图片可以随意选择Q这些圆点就可以看v来更漂亮?/p>
下面Q我们把一个无需列表攚w成有圆滑圆点的Q?/p>
ul {
list-style: none; /* Removes default bullets. */
}
ul li {
padding-left: 40px; /* Indents list items, leaving room for background image on the left. */
background: url(bulletpoint.jpg) 0 0 no-repeat;
}
CSS3 中的背景有较多改q。最显著的是多背景图片的选项Q同时也增加?个新属性?/p>
CSS3 中,可以对一个元素应用一个或多个囄作ؓ(f)背景。代码和 css2 中的一P只需要用逗号来区别各个图片。第一个声明的囄定位在元素顶部,其它的图片按序在其下排列Q例如:(x)
background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);
q又把我们带回了(jin)文章开始讨论的那个关于Ҏ(gu)内图片显C的话题。它被描qCؓ(f)“背景描绘?#8221;?/p>
background-clip 属性用来增景显CZ|的控制能力。可能的gؓ(f)Q?/p>
* background-clip: border-box;
背景昄在边框内?br />
* background-clip: padding-box;
背景昄在内补白(padding)内,而不是边框内?br />
* background-clip: content-box;
只在内容内显C景,而不是内补白(padding)和边框内?br />
* background-clip: no-clip;
默认|?border-box 一栗?/p>
q个属性和 background-position l合h使用。可以从Ҏ(gu)Q内补白或者内容盒子开始计?background-position (cM?background-clip)?/p>
* background-origin: border-box;
以边框ؓ(f)原点开始计?background-position.
* background-origin: padding-box;
以内补白为原点开始计?background-position
* background-origin: content-box;
以内容盒子ؓ(f)原点开始计?background-position
对于 background-clip ?background-origin 不同的一个解释参?CSS3.info
background-size 用来调整背景囄大小。有好几个可能|(x)
* background-size: contain;
~小囄来适应元素的尺?保持像素的长宽比)
* background-size: cover;
扩展囄来填满元?保持像素的长宽比)
* background-size: 100px 100px;
调整囄到指定大?br />
* background-size: 50% 100%;
调整囄到指定大。百分比是相对于包含元素的尺寸的?/p>
可以看一?CSS3规则 |站上的几个例子?/p>
CSS3 中,元素可以被分成几个独立的盒子(例如 使内联元?span 跨越多行)。background-break 属性用来控制背景怎样在这些不同的盒子中显C?/p>
可能gؓ(f)Q?/p>
* Background-break: continuous;
默认倹{忽略盒之间的距?也就是像元素没有分成多个盒子Q依然是一个整体一?
* Background-break: bounding-box;
把盒之间的距计在?br />
* Background-break: each-box;
为每个盒子单独重l背?/p>
background-color ?css3 中有?jin)稍许改q。除?jin)设|背景颜色之外,如果元素底层的背景图不可用,q可以设|一?#8220;回退?#8221;?/p>
通过在回退色之前增加一个斜?/)来实玎ͼ例如Q?/p>
background-color: green / blue;
此例中,背景色应该是l色(green)。然而,如果底层背景图不能用的话,背景色就是蓝色而不是绿艌Ӏ如果在斜杠前不指定颜色Q默认ؓ(f)透明(transparent)?/p>
CSS2中当囄q铺Ӟ?x)被元素在末端截断。CSS3 引入?jin)两个属性来修正q个问题:
* space: 应用同等数量的空白到囄之间Q直到填满整个元?br /> * round: ~小囄直到正好q铺满元?br /> 关于 background-repeat: space; 的一个例子,可以?a > CSS3 规则|站看到?/p>
background-attachment 属性增加了(jin)一个新|(x)local。这是用来配合可以滚动的元素?讄?overflow: scroll; 的元?。当 background-attachment 讄为滚?scroll)Ӟ背景图不?x)随元素内容的滚动而滚动?/p>
讄?background-attachment :local; Ӟ背景图会(x)随内容的滚动而滚动?/p>
ȝ一下,css 中关于背景有许多需要知道的知识。但是一旦把q些知识融会(x)贯通了(jin)Q这些技术和命名U定变得非常有意义而且很快׃(x)成ؓ(f)潜意识行Z(jin)?/p>
如果刚接?cssQ主要不断联pd可以较快地掌握背景的要点?jin)。如果是老手Q我希望你可以和我一h?css3 ?/p>
Michael Martin 的文章大多涉?qing)网设计,W(xu)ordPress qؓ(f) Pro Blog Design 工作。可以查看更多关于博客设计的文章或者在 twitter 上关注他?/p>
p伴西红柿:(x)一看到q么长篇大论的也头晕Q花?jin)好几天的时间折腾这文章。全是基的只是,没有什么花哨的Q但是我觉得最基础的也是最重要的?/p>
鉴于好多|站都会(x)转蝲别h的文章,当然?jin),好的文章我们也?x)转蝲Q不q有些h直接把别辛苦苦的力_付出拿来当自q东西?/p>
q些人真的很无耻,q个大环境也真的很?zhn)哀Q没人愿意踏t实实地做事。这是Z么我们L译国外的文章,而不是把׃的文章翻译成外语让外国h看的Ҏ(gu)所在?/p>
可?zhn)啊?/p>