CSS background 属性

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

定义和用法

background是 CSS 中用于设置元素背景的简写属性，可以设置背景颜色、背景图像、背景位置、背景图像尺寸等。

默认值：	transparent none repeat scroll 0% 0% auto padding-box border-box
返回值：	一个字符串，表示元素的背景
继承性：	否
可动画性：	否。请参阅：可动画属性。
版本：	CSS1 + CSS3
JavaScript 语法：	object.style.background="white url(paper.gif) repeat-y"

常用的实例

接下来通过多个实例演示background属性的用法，来深化您对background属性的理解。

实例代码运行代码

复制

/* 单一颜色背景 */
.element {
    background: #f0f0f0;
}

/* 图片背景 */
.element {
    background: url("image.png") no-repeat center center / cover;
}

/* 渐变背景 */
.element {
    background: linear-gradient(to bottom, #1e5799, #8373c9) fixed;
}

/* 多重背景 */
.element {
    background:
        url("top-image.png") top left no-repeat,
        url("bottom-image.png") bottom right no-repeat,
        linear-gradient(to bottom, rgba(30,87,153,0.5), rgba(32,124,202,0.5));
}

CSS 语法

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

属性值

值	描述
background-color	规定要使用的背景颜色。
background-image	规定要使用的背景图像。
background-position	规定背景图像的位置。
background-size	规定背景图像的尺寸。
background-repeat	规定如何重复背景图像。
background-origin	规定背景图片的定位区域。
background-clip	规定背景的绘制区域。
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动。
`initial`	将此属性设置为其默认值。参阅 initial。
`inherit`	从其父元素继承此属性。参阅 inherit。