首页 > CSS教程 > CSS 背景重复
此章节介绍:

    CSS 背景重复

    CSS background-repeat

    默认情况下,background-image 属性在水平和垂直方向上都重复图像。

    某些图像应只适合水平或垂直方向上重复,否则它们看起来会很奇怪,如下所示:

    实例

    body {
      background-image: url("gradient-bg.png");
    }


    如果上面的图像仅在水平方向重复 (background-repeat: repeat-x;),则背景看起来会更好:

    实例

    body {
      background-image: url("gradient-bg.png");
      background-repeat: repeat-x;
    }


    提示:如需垂直重复图像,请设置 background-repeat: repeat-y;


    CSS background-repeat: no-repeat

    background-repeat 属性还可指定只显示一次背景图像:

    实例

    背景图像仅显示一次:

    body {
      background-image: url("tree.png");
      background-repeat: no-repeat;
    }


    在上例中,背景图像与文本放置在同一位置。我们想要更改图像的位置,以免图像过多干扰文本。


    CSS background-position

    background-position 属性用于指定背景图像的位置。

    实例

    把背景图片放在右上角:

    body {
      background-image: url("tree.png");
      background-repeat: no-repeat;
      background-position: right top;
    }