CSS Backgrounds背景图像

vicky.yu

background-image 属性描述了元素的背景图像.

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

页面背景图片设置实例:

实例
body {background-image:url('paper.gif');}

尝试一下 »
下面是一个例子是一个糟糕的文字和背景图像组合。文本可读性差:

实例
body {background-image:url('bgdesert.jpg');}

尝试一下 »

背景图像 - 水平或垂直平铺
如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。
默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如下所示:

实例
body
{background-image:url('gradient2.png'); }

尝试一下 »
如果图像只在水平方向平铺 (repeat-x) , 页面背景会更好些:

实例
body
{background-image:url('gradient2.png');
background-repeat:repeat-x;}

尝试一下 »

背景图像- 设置定位与不平铺
Remark 让背景图像不影响文本的排版

如果你不想让图像平铺，你可以使用 background-repeat 属性:

实例
body
{background-image:url('img_tree.png');
background-repeat:no-repeat;}

尝试一下 »
以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。

可以利用 background-position 属性改变图像在背景中的位置:

实例
body
{background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;}

尝试一下 »
提示：为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center；其次，可以使用长度值，如 100px 或 5cm；最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。