CSS-背景

重要！前言必读！

本章节主要学习的是css的背景，css的背景分背景颜色(background-color)、背景图像(background-image)、背景平铺(background-repeat)、背景图像位置(background-position)、背景附着(background-attachment)。

---

背景绘制区域（background-clip）、背景图像定位（background-origin）、背景图像尺寸（background-size）

背景颜色：background-color

注意！背景颜色是指HTML或CSS中用于指定元素背景的颜色

代码图

效果图

---

背景图像：background-image

注意！背景图像指的是添加图像图片，并通过图像的路径指定背景图像。

效果图

效果图

背景图像为什么会重复？：背景图像尺寸小于背景区域就会重复，背景图像会在元素的水平和垂直方向上进行重复平铺以填充整个背景区域，可以通过background-repeat属性来控制，可以设置为repeat、repeat-x、repeat-y或no-repeat来指定图像的重复方式，或者使用background-size属性来调整背景图像的尺寸以防止重复。

---

背景平铺：background-repeat

注意！背景平铺适合某些图像应只适合水平或垂直方向上重复，否则它们看起来会很奇怪，通过改变平铺方向让其变的更加好看。

• repeat：图像在水平和垂直方向平铺以填充整个背景区域
• repeat-x：图像只在水平方向平铺
• repeat-y：图像只在垂直方向平铺
• no-repeat：图像不进行平铺，只显示一次

图像只在水平方向平铺

代码图

效果图

图像不进行平铺，只显示一次

代码图

效果图

---

背景图像位置：background-position

注意！background-position是用于指定背景图像位置，控制背景图像在元素内的位置。

• right top:右边缘将与元素的右边缘对齐，顶部边缘将与元素的顶部边缘对齐

• left top:左边缘将与元素的左边缘对齐，顶部边缘将与元素的顶部边缘对齐

• top：顶部边缘将与元素的顶部边缘对齐

代码图

效果图

---

背景附着：background-attachment

注意！background-attachment是用于指定背景图像是应该滚动还是固定的，这里的滚动和固定指的是页面是否会一起滚动。

• fixed：固定
• scroll：滚动

背景图像固定

代码图

效果图

背景图像滚动

代码图

效果图

背景绘制区域：background-clip

注意！background-clip用于指定背景的绘制区域，允许您控制背景的绘制范围，可以与 background-origin 属性结合使用。

• border-box：背景绘制在边框框盒之下
• padding-box：背景绘制在内边距框盒之下
• content-box：背景绘制在内容框盒之下

代码图

效果图

---

背景图像定位:background-origin

注意！background-origin用于指定背景图像定位的参考点，影响背景图片的初始位置。

• padding-box：背景图片的位置从内边距区域开始
• border-box：背景图片的位置从边框区域开始
• content-box：背景图片的位置从内容区域开始

代码图

效果图

---

背景图像尺寸：background-size

注意！background-size用于设置元素背景图片的大小，通过指定具体的长度值或百分比来调整背景图片的宽度和高度。

代码图

效果图