背景图像

 

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

 

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

 

    页面背景图片设置实例:

 

    实例

 

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

 

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

 

    实例

 

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

 

    背景图像-水平或垂直平铺

 

    默认情况下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:righttop;

 

    }