当前位置：首页 > news >正文

CSS background 背景

news 2025/8/13 19:50:07

background属性为元素添加背景效果。

它是以下属性的简写，按顺序为：

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

以下所有示例中的花花.jpg图片的大小是48×48。

1 background-color

background-color指定元素的背景色。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 背景色 Demo</title><style>body {margin: 0;padding: 0;}.container {width: 200px;height: 200px;background-color: #f0f0f0;}.box {width: 100px;height: 100px;background-color: #f00;}</style>
</head>
<body><div class="container"><div class="box"></div></div>
</body>
</html>

在这里插入图片描述

2 background-image

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 背景图片 Demo</title><style>body {margin: 0;padding: 0;}.bg {width: 96px;height: 96px;background-image: url('./花花.png')}</style>
</head><body><div class="bg"></div>
</body></html>

在这里插入图片描述

背景图片默认是重复的（repeat）。

3 background-repeat

它具有以下值。

1）默认值repeat

repeat会裁剪重复图片超出的部分。

.bg{width: 120px;height: 96px;background-repeat:repeat;
}

在这里插入图片描述

2）space

space是无裁剪的重复。

其重复原理：

如果图片不能刚好放下，剩余长或宽将均匀分布在图片之间。
第一张图片一定从左上方的顶点位置开始排列。
如果图片大小超出容器大小，那么将被裁剪。

.bg{width: 120px;height: 96px;background-repeat:space;
}

在这里插入图片描述

.bg{width: 160px;height: 96px;background-repeat:space;
}

在这里插入图片描述

3）round

round是自适应重复，相比较于space，它会根据元素与图片的大小关系拉伸或缩小图片。

比如说，一个图片长为 $x$ ，元素长为 $X$ ， $\leq X \leq mx$ ，如果 $X$ 更靠近 $n x$ ，那么图片将被放大，如果 $X$ 更靠近 $m x$ ，那么图片将被缩小。

4）no-repeat

no-repeat设置图片不允许重复。

4 background-attachment

background-attachment决定图片的滚动行为。

其值包括：

scroll（默认值）：背景图片随页面滚动而滚动。

在这里插入图片描述

fixed：背景图片不会随页面滚动而滚动，而是相对于视口的原点（左上角）固定。

在这里插入图片描述

我们观察到这两个元素的背景图片是重叠在一起了。

local：不随页面滚动，但随元素内部滚动而滚动。

在这里插入图片描述

5 background-position

background-position用于设定图片的位置，其值类型如下：

.bg{/*关键字*/background-position:top;background-position:bottom;background-position:center;background-position:left;background-position:right;/*百分比值*/background-position:50% 50%;/*长度值*/background-position:10cm 10cm;/*边界偏移值*/background-position:top 10em left 10px;/*全局值*/background-position:inherit; /*继承父元素*/background-position:initial; /*设置为初始值，默认*/background-position:revert; /*重置为样式表中的值*/background-position:unset; /*重置为初始值，如果父元素背景位置有定义，继承父元素的值*/
}