期待明天 — Tue, 06 Oct 2009 01:49:00 GMT

原文链接�Q?a title="Backgrounds In CSS: Everything You Need To Know" rel="bookmark" >Backgrounds In CSS: Everything You Need To Know

译文链接�Q?a >css 背景全攻�?/a>

转蝲请保留版权以及链�?/p>

—————————————————————————————�?/p>

背景(background)是css中一个重要的的部分，也是需要知道的css的基��知识之一。这��文章将会涉及css背景 (background)的基本用法，包括诸如 background-attachment �{�的属性，也会介绍一些有兌��?background)的常用技巧，以及 css3 中的背景(background)(包含4个新的背�?background)属�?�?/p>

css2 中的背景(background)

概述

CSS2 中有5个主要的背景(background)属性，它们是：

* background-color: 指定填充背景的颜艌Ӏ?/p>

* background-image: 引用囄��作�ؓ背景�?/p>

* background-position: 指定元素背景囄��的位�|��?/p>

* background-repeat: 军_��是否重复背景囄��?/p>

* background-attachment: 军_��背景图是否随��面滚动�?/p>

�q�些属性可以全部合�q��ؓ一个羃写属�? background。需要注意的一个要�Ҏ��背景占据元素的所有内容区域，包括 padding �? border�Q�但是不包括元素�?margin。它�?Firefox, Safari ,Opera 以及 IE8 中工作正常，但是 IE6 �? IE7 中，background 没把 border 计算在内�?/p>

基本属�?/h4>

背景�?background-color)

background-color 属性用�U�色来填充背景。有许多方式指定�q�个颜色�Q�以下方式都得到相同的结果�?/p>

background-color: blue;







background-color: #0000ff;







background-color: #0000ff;

background-color 也可被设�|��ؓ透明�Q�transparent�Q�，�q�会使得其下的元素可见�?/p>

背景�?background-image)

background-image 属性允许指定一个图片展�C�在背景中。可以和 background-color �q�用�Q�因此如果图片不重复地话�Q�图片覆盖不到地地方都会被背景色填充。代码很��单，只需要记住，路径是相对于样式表的�Q�因此以下的代码中，囄��和样式表�? 在同一个目录中的�?/p>

background-image: url(image.jpg);

但是如果囄��在一个名�?images 的子目录中，��应该是�Q?/p>

background-image: url(images/image.jpg);

�p�伴西红柿：使用 ../ 表示上一�U�目录，比如 background-image: url(../images/image.jpg); 表示囄��位于样式表的上��目录中的 images 子目录中。有点绕�Q�不�q�这个大家应该都知道了，我就不详说了�?/p>

背景�q�铺(background-repeat)

讄��背景囄��Ӟ��默认把图片在水��^和垂直方向��^��Z��铺满整个元素。这也许是你需要的�Q�但是有时会希望囄��只出��C��ơ，或者只在一个方向��^铺。以下�ؓ可能的设�|�值和�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)

background-position 属性用来控制背景图片在元素中的位置。技巧是�Q�实际上指定的是囄��左上角相对于元素左上角的位置�?br /> �? 面的例子中，讄��了一个背景图片�ƈ且用 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>

* left
* center
* right

y 轴上:

* top
* center
* bottom

��序斚w��和��用像素值时的顺序几乎一��P��首先�?x ��_��其次�?y ��_��像这��P��

background-position: top right;

使用癑ֈ�数时也类伹{��需要主要的是，使用癑ֈ�数时�Q�浏览器是以元素的百分比数值来讄��囄��的位�|�的。看例子��好理解了。假设设定如下：

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�其实是��背景图片的癑ֈ�比指定的位置和元素的癑ֈ�比位�|�对齐。也��是��_��癑ֈ�数定位是改变了背景图和元素的寚w��基点。不再像使用像素和关键词定位�Ӟ��使用背景囑֒�元素的左上角为对齐基炏V��例如上例的 background-position: 100% 50%; ��是��背景图片的 100%(right) 50%(center) �q�个点，和元素的 100%(right) 50%(center) �q�个点对齐�?/p>

�q�再一�ơ说明了�Q�我们一直认为已�l�掌握的��单的东西�Q�其实还有我们有限的认知之外的知识�?/p>

注意原点��L��左上角，最�l�的效果是笑脸图片被定位在元素的最双��Q�离元素�剙��是元素的一半，效果�?background-position: right center; 一栗��?/p>

背景附着

background-attachment 属性决定用��h��动页面时囄��的状态。三个可用属性�ؓ scroll(滚动)�Q�fixed(固定) �?inherit(�l�承)。inherit 单纯地指定元素��承他的父元素�?background-attachment 属性�?/p>

��Z��正确地理�?background-attachment�Q�首先需要明白页�?page)和视�?view port)是如何协作地。视�?view port)是浏览器昄��|�页的部�?��是��L��工具栏的��览�?。视�?view port)的位�|�固定，不变动�?/p>

当向下滚动网��|��Q�视�?view port)是不动的�Q�而页面的内容向上滚动。看��h��貌似视口(view port)向页面下�Ҏ��动了。如果设�|?background-attachment: scroll�Q�就讄��了当元素滚动�Ӟ��元素背景也必需随着滚动。简而言之，背景是紧贴元素的。这�?background-attachment 默认倹{�?/p>

用一个例子来更清楚地描述下：

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>

用另一个例子描�q�C��Q?/p>

background-image: url(test-image.jpg);







background-position: 0 100%;







background-repeat: no-repeat;







background-attachment: fixed;

��面已经向下滚动了，但是囑փ�仍然保持可见�?/p>

需要重视的一�Ҏ��背景囑֏�能出现在它父元素能达到的区域。即使图片是相对于视�?view port)定位圎ͼ�如果它的父元素不可见�Q�图片就会消失。参见下面的例子。此例中�Q�图片位于视�?view port)的左下方�Q�但是只有元素内的图片部分是可见的�?/p>

background-image: url(test-image.jpg);







background-position: 0 100%;







background-repeat: no-repeat;







background-attachment: fixed;

因�ؓ囄��开始在元素之外�Q�一部分囄��被切除了�?/p>

背景的简写属�?/h4>

可以把背景的各个属性合��Z��行，而不用每�ơ都单独把他们写出来。格式如下：

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;

可以合�ؓ单独一行：

background: transparent url(image.jpg) 50% 0 scroll repeat-y;

而且不需要指定每一个倹{��如果省略值地话，��׃��用属性地默认倹{��例如，上面那行和下面这个效果一��P��

background: url(image.jpg) 50% 0 repeat-y;

背景的一般用�?/h3>
除了可以用来使元素更加优雅这�c�L��然的用法之外�Q�背景也可以用于其它的目的�?/p>

仿栏

当��?css �?float 属性来定位布局元素�Ӟ��要确保两栏或多栏有相同的长度是比较困隄��。如果长度不同，其中一栏的背景会比另外的短�Q�这会破坏整个设计�?/p>

仿栏是个非常��单的背景技巧，�q�个技巧最早发表在A List Apart 。思�\很简单：不再�l�每列单独设�|�背景，而是�l�各列的父元素设�|�一个背景图。所有栏的设计都包含在这张图片之中�?/p>

文本替换

在网��上�Q�对于字体的选择是相当有限的。可以��?sIFR 之类的工��h��定制字体�Q�但是这需要用户启�?JavaScript 。一个适用于�Q意浏览器的简单方法是�Q�用想用的字体来做一张文本图片，�q�用�q�张囄��作�ؓ背景。这��P��文本依然出现在文档标��C��以供搜烦引擎��索和屏幕��览器识别，但是在浏览器中就会显�C�首选的字体�?/p>

例如�Q�HTML 标记可能是这��L��Q?/p>

<h3>Blogroll</h3>

假如有一�?200 �?75 的图片，上面有更好看的字体，��可以用如下方式来替换文本：

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 属性，只需要简单地把他们隐藏�ƈ用背景图代替��可以了。因为图片可以随意选择�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 中的背景

CSS3 中的背景有较多改�q�。最显著的是多背景图片的选项�Q�同时也增加�?个新属性�?/p>

多背�?/h4>

CSS3 中，可以对一个元素应用一个或多个囄��作�ؓ背景。代码和 css2 中的一��P��只需要用逗号来区别各个图片。第一个声明的囄��定位在元素顶部，其它的图片按序在其下排列�Q�例如：

background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);

新属性：背景修剪(background-clip)

�q�又把我们带回了文章开始讨论的那个关于�Ҏ��内图片显�C�的话题。它被描�q�Cؓ“背景描绘�?#8221;�?/p>

background-clip 属性用来增��景显�C�Z��|�的控制能力。可能的��gؓ�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>

新属性：背景原点(background-origin)

�q�个属性和 background-position �l�合��h��使用。可以从�Ҏ��Q�内补白或者内容盒子开始计��?background-position (�c�M��?background-clip)�?/p>

* background-origin: border-box;
以边框�ؓ原点开始计��?background-position.
* background-origin: padding-box;
以内补白为原点开始计��?background-position
* background-origin: content-box;
以内容盒子�ؓ原点开始计��?background-position
对于 background-clip �?background-origin 不同的一个解释参�?CSS3.info

新属性：背景��寸(background-size)

background-size 用来调整背景囄��大小。有好几个可能��|��

* background-size: contain;
�~�小囄��来适应元素的尺�?保持像素的长宽比)
* background-size: cover;
扩展囄��来填满元�?保持像素的长宽比)
* background-size: 100px 100px;
调整囄��到指定大��?br /> * background-size: 50% 100%;
调整囄��到指定大��。百分比是相对于包含元素的尺寸的�?/p>

可以看一�?CSS3规则 �|�站上的几个例子�?/p>

新属性：(background-break)

CSS3 中，元素可以被分成几个独立的盒子(例如使内联元�?span 跨越多行)。background-break 属性用来控制背景怎样在这些不同的盒子中显�C��?/p>

可能��gؓ�Q?/p>

* Background-break: continuous;
默认倹{��忽略盒之间的距��?也就是像元素没有分成多个盒子�Q�依然是一个整体一�?
* Background-break: bounding-box;
把盒之间的距��计��在�?br /> * Background-break: each-box;
为每个盒子单独重�l�背�?/p>

背景�?background-color)的改�q?/h4>

background-color �?css3 中有了稍许改�q�。除了设�|�背景颜色之外，如果元素底层的背景图不可用，�q�可以设�|�一�?#8220;回退�?#8221;�?/p>

通过在回退色之前增加一个斜�?/)来实玎ͼ�例如�Q?/p>

background-color: green / blue;

此例中，背景色应该是�l�色(green)。然而，如果底层背景图不能��用的话，背景色就是蓝色而不是绿艌Ӏ�如果在斜杠前不指定颜色�Q�默认�ؓ透明(transparent)�?/p>

背景�q�铺(background-repeat)的改�q?/h4>
CSS2中当囄��q�铺�Ӟ��会被元素在末端截断。CSS3 引入了两个属性来修正�q�个问题:

* space: 应用同等数量的空白到囄��之间�Q�直到填满整个元�?br /> * round: �~�小囄��直到正好�q�铺满元�?br /> 关于 background-repeat: space; 的一个例子，可以�?a > CSS3 规则�|�站看到�?/p>

背景附着(background-attachment)的改�q?/h4>
background-attachment 属性增加了一个新��|��local。这是用来配合可以滚动的元素�?讄��?overflow: scroll; 的元�?。当 background-attachment 讄��为滚�?scroll)�Ӟ��背景图不会随元素内容的滚动而滚动�?/p>
讄��?background-attachment :local; �Ӟ��背景图会随内容的滚动而滚动�?/p>

�ȝ��

�ȝ��一下，css 中关于背景有许多需要知道的知识。但是一旦把�q�些知识融会贯通了�Q�这些技术和命名�U�定��变得非常有意义而且很快��׃��成�ؓ潜意识行��Z��?/p>

如果刚接�?css�Q�主要不断联�p�d��可以较快地掌握背景的要点了。如果是老手�Q�我希望你可以和我一��h��?css3 �?/p>

关于作�?/h4>
Michael Martin 的文章大多涉及网��设计，WordPress �q��ؓ Pro Blog Design 工作。可以查看更多关于博客设计的文章或者在 twitter 上关注他�?/p>
�p�伴西红柿：一看到�q�么长篇大论的也头晕�Q�花了好几天的时间折腾这��文章。全是基��的只是，没有什么花哨的�Q�但是我觉得最基础的也是最重要的�?/p>
鉴于好多�|�站都会转蝲别�h的文章，当然了，好的文章我们也会转蝲�Q�不�q�有些�h直接把别��辛苦苦的力_��付出拿来当自��q��东西�?/p>
�q�些人真的很无耻，�q�个大环境也真的很悲哀�Q�没人愿意踏�t�实实地做事。这��是��Z��么我们��L��译国外的文章，而不是把�׃��的文章翻译成外语让外国�h看的�Ҏ��所在�?/p>
可悲啊�?/p>

期待明天 2009-10-06 09:49 发表评论

久久久亚洲精品无码,亚洲精品无码99在线观看,九月婷婷亚洲综合在线