Detailed explanation of the background property of CSS

background is the background of a box, often used to set the background color and background image

The background has a total of 8 properties to set the shape of the background

background-color: background color
background-image: background image
background-repeat: repeat background image
background-attachment: whether to be fixed or to scroll with the rest of the page
background-position: the position of the background image
background-size: the size of the background
background-origin: background image positioning area
background-clip: background image drawing area

next我们依次看一下每个属性的作用和功能

- background-color: background color

Default: transparent The background color is transparent.
code:

background-color: white; // 系统定义的颜色名
background-color: rgb(255,255,255); // rgb 和 rgba 格式
background-color: hsla(120,30%,24%,.3); // hsla() 中的a 是Alpha 通道，表示不透明度,值为0到1

background-image: background image

Default: none
Code:

linear-gradient() //创建一个线性渐变的 "图像"(从上到下)
radial-gradient() //用径向渐变创建 "图像"
repeating-linear-gradient() //创建重复的线性渐变 "图像"。
repeating-radial-gradient() //创建重复的径向渐变 "图像"
inherit //指定背景图像应该从父元素继承

background-repeat: repeat background image

Default: repeat The background image will repeat vertically and horizontally

repeat-x // 背景图像将在水平方向重复。
repeat-y // 背景图像将在垂直方向重复。
no-repeat // 背景图像将仅显示一次。
inherit // 规定应该从父元素继承 background-repeat 属性的设置。

background-attachment: whether to be fixed or to scroll with the rest of the page

Default: scroll // The background image will move as the rest of the page is scrolled.

 background-attachment: fixed; //当页面的其余部分滚动时，背景图像不会移动。
 inherit // 规定应该从父元素继承 background-attachment 属性的设置。

background-position: the position of the background image

Default value: 0% 0%
提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

background-position:center; // 居中
background-position:20% 20%;
background-position:top left; // x轴和y轴的设置 还有多种搭配就不一一写了

background-size: the size of the background

Default: auto

background-size:80px 60px; // 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。
background-size:cover;//把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
background-size:contain;//把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

background-origin: background image positioning area

Default: padding-box The background image is positioned relative to the padding box.

background-origin:content-box; // 背景图像相对于内边距框来定位。
background-origin:border-box; // 背景图像相对于边框盒来定位。
background-origin:border-box; // 背景图像相对于内容框来定位。

background-clip: background image drawing area

Default: border-box // The background is clipped to the border box.

background-clip:padding-box; // 背景被裁剪到内边距框。
background-clip:content-box; // 背景被裁剪到内容框。

亿点小知识:在开发中我们可以简写以下代码：

background：url（） no-repeat center;

The above are backgroundthe properties and usage of . Thank you for reading.
If you encounter other problems, you can discuss and study with me in private.
If it is helpful to you, please 点赞bookmark it. Thank you~!
Pay attention to favorite bloggers and will continue to update...