CSS布景属性Background详解 www.yyjcw.com

本文详解了CSS的布景属性Background，包罗CSS3中新增的布景属性。若是你是个CSS初学者，还可以查看之前介绍的CSS浮动属性和CSS透明属性详解。

css2 中的布景（background）

CSS2 中有5个首要的布景（background）属性，它们是：

background-color： 指定填充布景的颜色。

background-image： 引用图片作为布景。

background-position： 指定元素布景图片的位置。

background-repeat： 抉择是否频频布景图片。

background-attachment： 抉择布景图是否随页面滚动。

这些属性可以全数合并为一个缩写属性： background。需要注重的一个要点是布景占有元素的所有内容区域，包罗 padding 和 border，可是不包罗元素的 margin。它在 Firefox， Safari ，Opera 以及 IE8 中工作正常，可是 IE6 和 IE7 中，background 没把 border 计较在内。

根基属性

布景色（background-color）

background-color 属性用纯色来填充布景。有良多体式格局指定这个颜色，以下体式格局都获得不异的功效。

background-color： blue;

background-color： rgb（0， 0， 255）;

background-color： #0000ff;

background-color 也可被设置为透明（transparent），这会使得其下的元素可见。

布景图（background-image）

background-image 属性许可指定一个图片展示在布景中。可以和 background-color 连用，是以若是图片不频频地话，图片笼盖不到地处所城市被布景色填充。代码很简单，只需要记住，路径是相对于样式表的，是以以下的代码中，图片和样式表是 在统一个目录中的。

background-image： url（image.jpg）;

可是若是图片在一个名为 images 的子目录中，就应该是：

background-image： url（images/image.jpg）;

布景平铺（background-repeat）

设置布景图片时，默认把图片在水安然平静垂直标的目标平铺以铺满整个元素。这也许是你需要的，可是有时会但愿图片只呈现一次，或者只在一个标的目标平铺。以下为可能的设置值和功效：

background-repeat： repeat; /* 默认值，在水安然平静垂直标的目标平铺 */

background-repeat： no-repeat; /* 不服铺。图片只展示一次。 */

background-repeat： repeat-x; /* 水平标的目标平铺（沿 x 轴） */

background-repeat： repeat-y; /* 垂直标的目标平铺（沿 y 轴） */

background-repeat： inherit; /* 担任父元素的 background-repeat 属性*/

布景定位（background-position）

background-position 属性用来节制布景图片在元素中的位置。技巧是，现实上指定的是图片左上角相对于元素左上角的位置。

下面的例子中，设置了一个布景图片而且用 background-position 属性来节制它的位置，同时也设置了 background-repeat 为 no-repeat。计量单元是像素。第一个数字暗示 x 轴（水平）位置，第二个是 y 轴（垂直） 位置。

/* 例 1： 默认值 */

background-position： 0 0; /* 元素的左上角 */

/* 例 2： 把图片向右移动 */

background-position： 75px 0;

/* 例 3： 把图片向左移动 */

background-position： -75px 0;

/* 例 4： 把图片向下移动 */

background-position： 0 100px;

background-position 属性可以用其它数值，关头词和百分比来指定，这比力有用，尤其是在元素尺寸不是用像素设置时。

关头词是不用诠释的。x 轴上：

* left

* center

* right

y 轴上：

* top

* center

* bottom

挨次方面和利用像素值时的挨次几乎一样，首先是 x 轴，其次是 y 轴，像这样：

background-position： top right;

利用百分数时也近似。需要首要的是，利用百分数时，浏览器是以元素的百分比数值来设置图片的位置的。看例子就好理解了。假设设定如下：

background-position： 100% 50%;

利用百分数定位时，其实是将背景图片的百分比指定的位置和元素的百分比位置对齐。也就是说，百分数定位是改变了布景图和元素的对齐基 点。不再像利用像素和关头词定位时，利用背景图和元素的左上角为对齐基点。例如上例的 background-position： 100% 50%; 就是将背景图片的 100%（right）50%（center） 这个点，和容器的 100%（right） 50%（center） 这个点对齐。

布景附着

background-attachment 属性抉择用户滚动页面时图片的状况。三个可用属性为 scroll（滚动），fixed（固定） 和 inherit（担任）。inherit 纯挚地指定元素担任他的父元素的 background-attachment 属性。

为了准确地舆解 background-attachment，首先需要大白页面（page）和视口（view port）是若何协作地。视口（view port）是浏览器显示网页的部门（就是去失踪工具栏的浏览器）。视口（view port）的位置固定，不变更。

当向下滚动网页时，视口（view port）是不动的，而页面的内容向上滚动。看起来貌似视口（view port）向页面下方滚动了。若是设置 background-attachment： scroll，就设置了当元素滚动时，元素布景也必需跟着滚动。简而言之，布景是紧贴元素的。这是 background-attachment 默认值。

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

background-image： url（test-image.jpg）;

background-position： 0 0;

background-repeat： no-repeat;

background-attachment： scroll;

当向下滚动页面时，布景向上滚动直至消逝踪。

可是当设置 background-attachment 为 fixed 时，当页面向下滚动时，布景要待在它原本的位置（相对于浏览器来说）。也就是不随元素滚动。

用另一个例子描述下：

background-image： url（test-image.jpg）;

background-position： 0 100%;

background-repeat： no-repeat;

background-attachment： fixed;

页面已经向下滚动了，可是图像仍然连结可见。

需要正视的一点是布景图只能呈此刻它父元素能达到的区域。即使图片是相对于视口（view port）定位地，若是它的父元素不成见，图片就会消逝踪。参见下面的例子。此例中，图片位于视口（view port）的左下方，可是只有元素内的图片部门是可见的。

background-image： url（test-image.jpg）;

background-position： 0 100%;

background-repeat： no-repeat;

background-attachment： fixed;

因为图片起头在元素之外，一部门图片被切除了。

布景的简写属性

可以把布景的各个属性合为一行，而不用每次都零丁把他们写出来。款式如下：

background： 《color》 《image》 《position》 《attachment》 《repeat》

例如，下面的声明

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;

而且不需要指定每一个值。若是省略值地话，就利用属性地默认值。例如，上面那行和下面这个结果一样：

background： url（image.jpg） 50% 0 repeat-y;

布景的一般用法

除了可以用来使元素加倍优雅这类显然的用法之外，布景也可以用于其它的目标。

仿栏

当利用 css 的 float 属性来定位结构元素时，要确保两栏或多栏有不异的长度是比力坚苦的。若是长度分歧，其中一栏的布景会比此外的短，这会破坏整个设计。

仿栏是个很是简单的布景技巧，这个技巧最早颁发在A List Apart 。思绪很简单：不再给每列零丁设置布景，而是给各列的父元素设置一个布景图。所有栏的设计都包含在这张图片之中。

文本替代

在网页上，对于字体的选择是相当有限的。可以利用 sIFR 之类的工具来定制字体，可是这需要用户启用 JavaScript 。一个合用于肆意浏览器的简单体式格局是，用想用的字体来做一张文本图片，并用这张图片作为布景。这样，文本依然呈此刻文档标识表记标帜中以供搜索引擎检索和屏幕浏览 器识别，可是在浏览器中就会显示首选的字体。

例如，HTML 标识表记标帜可能是这样的：

《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 */

}

简单的圆点

无需列表中的圆点看起来很难看。不用再措置所有分歧的 list-style 属性，只需要简单地把他们埋没并用布景图取代就可以了。因为图片可以随意选择，这些圆点就可以看起来更标致。

下面，我们把一个无需列表革新成有圆滑圆点的：

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 中的布景有较多改良。最显著的是多布景图片的选项，同时也增添了4个新属性。

多布景

CSS3 中，可以对一个元素应用一个或多个图片作为布景。代码和 css2 中的一样，只需要用逗号来区别各个图片。第一个声明的图片定位在元素顶部，其它的图片顺次在其下枚举，例如：

background-image： url（top-image.jpg）， url（middle-image.jpg）， url（bottom-image.jpg）;

新属性：布景修剪（background-clip）

这又把我们带回了文章起头谈判的阿谁关于边框内图片显示的话题。它被描述为“布景描画区”。

background-clip 属性用来增强布景显示位置的节制能力。可能的值为：

* background-clip： border-box;

布景显示在边框内。