CSS background 属性的八个值

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

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

1. background-color
2. background-image
3. background-repeat
4. background-position
5. background-size
6. background-origin
7. background-clip
8. background-attachment

.element {
  background: #ff0000 url('background.jpg') no-repeat top right / 200px 150px content-box border-box fixed;
}

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

1 background-color

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

2 background-image

<div class="bg"></div>

body {
	margin: 0;
	padding: 0;
}

.bg {
	width: 96px;
	height: 96px;
	background-image: url('./花花.jpg')
}

背景图片默认是重复的。

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\)，\(nx \leq X \leq mx\)，如果\(X\)更靠近\(nx\)，那么图片将被放大，如果\(X\)更靠近\(mx\)，那么图片将被缩小。

4）no-repeat

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

4 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; /*重置为初始值，如果父元素背景位置有定义，继承父元素的值*/
}

5 background-size

用于控制背景图片的尺寸和适应方式。

初始值：auto auto。

以下是一些常见的 background-size 值和解释：

示例使用背景图片（390x693 ）：

1）auto

默认值，背景图片大小保持原始尺寸，不进行缩放。

2）长度值

使用指定的长度单位（如像素）设置背景图片的宽度和高度。

例如，background-size: 200px 100px; 将背景图片的宽度设置为 200 像素，高度设置为 100 像素。

如果只设置一个值，那么该值将作为宽度，高度设为auto。

3）百分比

使用指定的百分比值设置背景图片的宽度和高度。

百分比是相对于包含元素的宽度和高度计算的。

例如，background-size: 50% 75%; 将背景图片的宽度设置为元素宽度的 50%，高度设置为元素高度的 75%。

4）cover

背景图片会完全覆盖整个元素，可能会裁剪部分图片。

背景图片会被等比例缩放，以适应元素的较小维度，然后将其余部分裁剪掉，以确保整个元素都被覆盖。

较小维度是看 元素长/图片长 以及 元素宽/图片宽 的比值大小。

width: 390px;
height: 500px;
background-size:cover

5）contain

确保整个背景图片完全包含在元素内，不会裁剪图片。

背景图片会被等比例缩放，以适应元素的较大维度，以确保整个图片都可见，不会被裁剪。

width: 390px;
height: 500px;
background-size:contain

6 background-origin

指定背景图片的原点位置在哪个区域的左上角。

该属性有以下值：

默认值padding-box

.bg {
    width: 48px;
    height: 48px;
    background-image: url('./花花.png'); 
    background-origin: padding-box;
    padding: 5px;
    border: 5px solid #b95353;
}

border-box

content-box

7 background-clip

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

8 background-attachment

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

其值包括：

scroll（默认值）

背景图片随页面滚动而滚动。

fixed

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

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

local

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