此专栏收录面试过程中遇到的问题。
可以说这些大部分都是八股，但是 面试官不是在出难题考你，而是在尝试寻找那个理由 ：为什么要录用你。
background属性
在CSS中，background是用于设置元素背景的属性。它具有多个子属性，可以独立或组合使用，以实现丰富的视觉效果。
通过background，可以在一行中定义背景颜色、背景图像、位置、重复方式等。
包括：
- background-color
- background-image
- background-position
- background-size
- background-repeat
- background-attachment
- background-origin
- background-clip
基本结构
background: [background-color] [background-image] [background-repeat] [background-position] / [background-size] [background-attachment] [background-origin] [background-clip];
注意：斜杠（/）用于分隔background-position和background-size，以便在简写属性中同时指定这两个属性。
background-color
为元素提供纯色背景颜色可以用颜色名称、十六进制、RGB、RGBA、HSL等方式定义。
background-color: #ff0000; /* 红色背景 */
background-image
设置元素的背景图像，可以使用URL引用外部图像，也支持CSS渐变
- URL引用外部图像
background-image: url('background-image');
- 使用渐变色作为背景图像
background-image: linear-gradient(to right, #f0000,#0000ff);
linear-gradient是一种CSS函数，用于生成沿着指定方向的颜色渐变，它通过定义多个颜色停靠点，使得颜色在元素的直线方向上平滑过渡。
linear-gradient(direction, color-stop1, color-stop2, ...);
direction（方向）：可选，定义渐变的方向。
- 角度：使用
deg单位指定渐变方向，如45deg。 - 关键字：使用
to top、to bottom、to left、to right等关键字指定方向，也可以联合使用to top right
color-stop（颜色停靠点）：定义渐变中使用的颜色及其位置。
- 可以指定颜色及其在渐变中的位置（百分比或长度）。
- 如果不指定位置，颜色会均匀分布。
用法：
- 关键字定位：
linear-gradient(to right, #ff7e5f, #feb47b); - 角度定位：
linear-gradient(45deg, #ff7e5f, #feb47b); - 颜色停靠点：
linear-gradient(to right, red 0%, yellow 50%, green 100%);
- 使用多个背景图像
background-image: url('image1.png'), url('image2.png');
background-position
设置背景图像的位置，可以使用关键字， 如top, center、百分比或具体长度来定位背景图像。
- 关键字
background-position: center center; /* 背景图像居中 */
- 长度
background-position: 100px 200px;
background-position: -50px -50px;
- 结合关键字和百分比
background-position: left 20px top 30px;
background-position: right 10% bottom 5%;
- 正值：背景图像相对于容器左上角向右和向下偏移。
- 负值：背景图像相对于容器左上角向左和向上偏移。
background-size
用于控制背景图像的尺寸，可以指定具体尺寸（如100px 200px）、关键字（如cover, contain），或百分比来调整背景图像的尺寸。
将background-size设置为0可以隐藏背景图像。
可选属性：
- 关键字
auto：保持背景图像的原始尺寸。cover：确保图像完全覆盖背景区域，同时保持图像的纵横比，图像会被缩放，以覆盖完整的背景的区域，图像可能会被裁剪。contain：确保图像在元素的背景区域完整显示，同时保持图像的纵横比。图像会被缩放，以适应容器的高度或者宽度，但可能会留有空白区域。
- 长度值
设置背景图像的宽度和高度
/* 设置单个长度值，另一个值根据原始比例自适应 */
.example-single-length {
background-image: url('image.jpg');
background-size: 200px; /* 设置宽度为200px，高度自动 */
}
/* 设置两个长度值，图像会纵横比失真*/
.example-two-lengths {
background-image: url('image.jpg');
background-size: 150px 100px; /* 宽度150px，高度100px */
}
- 百分比
根据容器宽度和高度的百分比设置图像的宽度和高度，和设置长度值类似
/* 设置单个百分比，另一个值根据原始比例自适应 */
.example-single-length {
background-image: url('image.jpg');
background-size: 50%; /* 设置宽度为容器宽度的50%，高度自动 */
}
/* 设置两个百分比，图像会纵横比失真*/
.example-two-lengths {
background-image: url('image.jpg');
background-size: 50% 25%; /* 宽度为容器宽度的50%，高度为容器高度的25% */
- 使用cal()函数
可以结合calc()函数进行动态计算
.example-calc {
background-image: url('image.jpg');
background-size: calc(100% - 20px) calc(100% - 20px);
}
background-repeat
设置图像是否重复
可以选择repeat, no-repeat, repeat-x, repeat-y等，控制图像在水平或垂直方向上的重复方式。
background-repeat: no-repeat; /* 不重复背景图像 */
background-attachment
设置背景图像的固定方式。
scroll（随内容滚动）、fixed（固定在视窗）、local（随元素内容滚动）。
background-origin
设置背景定位区域的起始位置
可以选择padding-box, border-box, content-box，决定背景图像相对于哪个盒模型部分进行定位。
border-box
背景图像的定位区域从元素的边框盒（border box）开始。背景图像会延伸到元素的边框外缘，包括边框本身。
padding-box（默认值）
背景图像的定位区域从元素的内边距盒（padding box）开始。背景图像覆盖内边距区域，但不延伸到边框区域。
content-box
背景图像的定位区域从元素的内容盒（content box）开始。背景图像只覆盖内容区域，不包括内边距和边框。
background-clip
设置背景的绘制区域。可以选择border-box, padding-box, content-box，决定背景图像的显示范围。
与 background-clip 的区别：
background-origin决定背景图像的起始定位区域。background-clip决定背景图像的绘制边界。- 两者结合使用，可以实现更精确的背景控制。
用法
.element {
background: #ff0000 url('image.jpg') no-repeat center center / cover fixed padding-box;
}
等同于
.element {
background-color: #ff0000;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
background-origin: padding-box;
}
