CSS背景属性Background详解

最新推荐文章于 2025-08-12 16:33:58 发布

桂林哈秋

最新推荐文章于 2025-08-12 16:33:58 发布

阅读量743

点赞数

分类专栏：网页设计文章标签： css border safari firefox opera ie

网页设计专栏收录该内容

81 篇文章

订阅专栏

本文介绍了CSS2中的五个主要背景属性，包括background-color、background-image、background-position等，并详细解释了如何使用background-position来精确控制背景图片的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章来自：http://paranimage.com/css-background-attribute/

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-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;

http://www.smashingmagazine.com/2009/09/02/backgrounds-in-css-everything-you-need-to-know/