您的位置：首页 > Web前端 > css > 正文

css中background属性介绍

更多时间：2013-11-19 类别：Web前端浏览量：1481

css中background属性介绍

css中background属性介绍

css中background属性用于定义元素的背景效果。可以设置如下属性

background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image

当然，在定义背景属性的时候，可以分开对单个属性进行赋值，通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

例如设置所有背景属性：

body { background: #00FF00 url(bgimage.gif) no-repeat fixed top; }

background-color 属性

定义和用法

background-color 属性设置元素的背景颜色。

元素背景的范围

background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。

可能的值

值	描述
color_name	规定颜色值为颜色名称的背景颜色（比如 red）。
hex_number	规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number	规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
transparent	默认。背景颜色为透明。
inherit	规定应该从父元素继承 background-color 属性的设置。

实例：

background-color： blue;

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

background-color： #0000ff;

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

background-image 属性

定义和用法

background-image 属性为元素设置背景图像。

说明

background-image 属性允许指定一个图片展示在背景中。可以和 background-color 连用，因此如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。

元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。

默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

可能的值

值	描述
url('URL')	指向图像的路径。
none	默认值。不显示背景图像。
inherit	规定应该从父元素继承 background-image 属性的设置。

实例

body
{
background-image: url(bgimage.gif);
background-color: #000000;
}

background-position 属性

定义和用法

background-position 属性设置背景图像的起始位置。

这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。

说明

提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

可能的值

值	描述
top left top center top right center left center center center right bottom left bottom center bottom right	如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。

值

描述

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

如果您仅规定了一个关键词，那么第二个值将是"center"。

默认值：0% 0%。

x% y%

第一个值是水平位置，第二个值是垂直位置。

左上角是 0% 0%。右下角是 100% 100%。

如果您仅规定了一个值，另一个值将是 50%。

xpos ypos

第一个值是水平位置，第二个值是垂直位置。

左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。

如果您仅规定了一个值，另一个值将是50%。

您可以混合使用 % 和 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 属性可以用其它数值，关键词和百分比来指定，这比较有用，尤其是在元素尺寸不是用像素设置时。

还可以通过CSS关键字定义background-position 属性。通常会用x 轴、y轴来定义

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-repeat 属性

定义和用法

background-repeat 属性设置是否及如何重复背景图像。

默认地，背景图像在水平和垂直方向上重复。

详细说明

background-repeat 属性定义了图像的平铺模式。

从原图像开始重复，原图像由 background-image 定义，并根据 background-position 的值放置。

提示

背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性，图像会被放置在元素的左上角。

可能的值

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

background-attachment 属性

定义和用法

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

可能的值

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
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）定位地，如果它的父元素不可见，图片就会消失。

背景的简写属性

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

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 background

上一篇：参加笔试前需要做哪些准备

下一篇：C#中equals和==的区别有哪些

您可能感兴趣

css中background属性介绍

css中background属性介绍

热门推荐

排行榜