CSS _ CSS 背景

CSS 背景

CSS中跟背景相关的属性被用于设置元素的背景效果样式；相关属性有如下几种：

background
background-color
background-image
background-repeat
background-attachment
background-position

HTML 元素背景色设置

使用background属性或background-color属性都可以设置背景色。

地镇高岗，一派西山千古秀；

门朝大海，三河合水万年河。

<div style="background-color:LightGray;">
地镇高岗，一派西山千古秀；
</div>

<div style="background:LightBlue;">
门朝大海，三河合水万年河。
</div>

运行一下

HTML 元素背景图片设置

使用background特性或background-image特性都可以设置元素的背景图片。

background: url('背景图片的url地址');

运行一下

background-image: url('背景图片的url地址');

运行一下

让背景图片只在水平方向上重复

默认情况下，背景图片会重复显示的；如果希望背景图片只在水平方向上重复，将元素的 background-repeat特性设置成repeat-x即可。

background-image: url('背景图片的url地址');
background-repeat: repeat-x;

运行一下

让背景图片只在垂直方向上重复

默认情况下，背景图片会重复显示的；如果希望背景图片只在垂直方向上重复，将元素的 background-repeat特性设置成repeat-y即可。

background-image: url('背景图片的url地址');
background-repeat: repeat-y;

运行一下

让背景图片不重复显示

默认情况下，背景图片会重复显示的；如果希望背景图片不重复显示，将元素的 background-repeat特性设置成no-repeat即可。

background-image: url('背景图片的url地址');
background-repeat: no-repeat;

运行一下

让背景图片不重复，且控制背景图片的位置

在背景图片不重复的基础上，背景图片默认在背景的左上角，如果想改变背景图片的位置，可通过background-position属性来控制图片的位置，如下所示：

background-image: url('背景图片的url地址');
background-repeat: no-repeat;
background-position: right top;

运行一下

让背景图片不随滚动而变化位置

在上述的基础上，为了让背景图片不随滚动而变化位置，也就是将背景图片钉在那个位置，这亦不是难事，洒家将“background-attachment”的属性设定为“fixed”就能搞定了。

background-image: url('背景图片的url地址');
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;

运行一下

使用background属性合并上述各属性

洒家觉得写了一串background相关的属性很累，于是乎，洒家用了另外一种方式，如下所示：

background: url('背景图片的url地址') no-repeat right top fixed;

运行一下

因此，洒家平时最常用的就是background，因为background可以包含5种跟背景相关属性。

background-color
background-image
background-repeat
background-attachment
background-position

下面再介绍跟背景相关的其他三种属性：background-origin、background-size、background-clip；因为并不常用，如若没有需求，可以直接略过，跳到下一节去。

使用background-origin定义背景图片的起始位置

利用background-origin属性可以定义背景图片的起始位置，该属性有三种取值：padding-box、border-box、content-box，具体如例所示：

#example1 {
    border: 10px double black;
    padding: 25px;
    background: url('https://logo.zhuanfou.com/bash.png');
    background-repeat: no-repeat;
    background-origin: padding-box;
}

#example2 {
    border: 10px double black;
    padding: 25px;
    background: url('https://logo.zhuanfou.com/bash.png');
    background-repeat: no-repeat;
    background-origin: border-box;
}

#example3 {
    border: 10px double black;
    padding: 25px;
    background: url('https://logo.zhuanfou.com/bash.png');
    background-repeat: no-repeat;
    background-origin: content-box;
}

运行一下

使用background-size来定义背景图片的尺寸

属性background-size的默认取值是auto，即按原有尺寸展示；如果想自定义背景图片的显示尺寸，设置该属性为指定宽度、高度即可，如案例所示：

background-size: 30px 30px;

运行一下

使用background-clip来定义背景的起始范围

与background-origin有点像，只是background-clip是用来定义背景效果的起始范围，三种取值：padding-box、border-box、content-box，具体如例所示：

#example1 {
    border: 10px double black;
    padding: 25px;
    background: LightBlue;
    background-clip: padding-box;
}

#example2 {
    border: 10px double black;
    padding: 25px;
    background: LightBlue;
    background-clip: border-box;
}

#example3 {
    border: 10px double black;
    padding: 25px;
    background: LightBlue;
    background-clip: content-box;
}

运行一下

CSS 背景

推广