面试官：「background」

（一）background-origin （背景图片相对元素的定位位置）

background-origin值有三个分别如下：

1. border-box 背景图片相对于元素border区域进行定位
2. padding-box 背景图片相对于元素padding区域进行定位
3. content-box 背景图片相对于元素content区域进行定位

代码如下：

.box {
  width: 220px;
  height: 60px;
  margin: 10px;
  padding: 10px;
  border: 10px dashed rgb(19, 216, 95);
  background: rgb(181, 177, 177);
  background-repeat: no-repeat; // 不平铺
  background-image: url('@/assets/01-icon.jpg');

  background-origin: padding-box; // 默认是背景图片开始的位置是从元素的内边距开始
  background-origin: border-box; // 背景图片相对于元素border区域进行定位
  background-origin: content-box; // 背景图片相对于元素content区域进行定位
}

效果如下：

（二）background-size （设置背景图片的大小）

background-size可以设置的形式有如下四种：

1. 百分比 如： 20% 30% 指的是背景图片占据背景区宽度的百分之20，高度的百分之30
2. 像素 如： 250px 300px 指的是背景图片的宽度为200像素，高度为300像素
3. 覆盖 如：cover 指的的是保持图片宽高比进行拉伸，使其完全占据背景区
4. 包含 如： contain 指的是保持图片宽高比进行缩放，使其恰好适合背景区

代码如下：

.box {
  width: 220px;
  height: 60px;
  margin: 10px;
  padding: 10px;
  border: 10px dashed rgb(19, 216, 95);
  background: rgb(181, 177, 177);
  background-repeat: no-repeat; // 不平铺
  background-image: url('@/assets/01-icon.jpg');

  background-size: 40% 60%; // 图片占背景宽度和高度的百分比
  background-size: 100px 40px; // 图片的像素大小
  background-size: cover; // 让图片进行拉伸，让其占满整个背景墙
  background-size: contain; // 保持图片的宽高进行缩放，使其恰好适应背景墙
}

效果如下：

（三）background-position （设置背景图片的位置）

background-position总共有5个属性，分别是top、right、bottom、left、center，这个5个属性可以单独使用，也可以两两使用。单独使用时，默认第二个参数为center。

属性值： x y

1. x取left center right
2. y取top center bottom

代码如下：

.box {
  width: 220px;
  height: 60px;
  margin: 10px;
  padding: 10px;
  border: 10px dashed rgb(19, 216, 95);
  background: rgb(181, 177, 177);
  background-repeat: no-repeat; // 不平铺
  background-image: url('@/assets/01-icon.jpg');

  background-position: right top; // 右上角
  background-position: center; // x轴和y轴都居中对齐
  background-position: 50% 50%; // 居中对齐
}

效果如下：

（四）background-attachment（背景图片是否固定）

背景图片是否固定支持的值以及含义:

1. scroll： 默认值，背景图片不固定，在视窗内滚动元素时，背景图片跟随元素一起滚动
2. fixed： 背景图片固定，在视窗内滚动元素时，背景图片不跟随元素一起滚动

（五）background-image渐变

渐变：background-image

渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。

渐变分为：

1. 线性渐变background-image: linear-gradient：沿着某条直线朝一个方向产生渐变效果。

linear-gradient(方向，起始颜色，颜色…，终止颜色);

• 方向：to left to right to top to bottom或者角度30deg顺时针
• 渐变1:起始颜色，终止颜色：yellow, green
• 渐变2：颜色+开始位置：
• 注意：不写方向，表示默认的方向是：从上往下

2. 径向渐变：从一个中心点开始沿着四周产生渐变效果。

径向渐变background-image: radial-gradient(at left top, yellow, green);

• radial-gradient（辐射的半径大小(可不写), 中心的位置，起始颜色，终止颜色）;
• 径向渐变标准写法加at，可不考虑兼容，并且前面可以加辐射半径 中心点的位置可以是：at left right center bottom top。如果以像素为单位，则中心点参照的是盒子的左上角。

3. 重复渐变。
   代码如下：

.box {
  width: 220px;
  height: 170px;
  background-repeat: no-repeat; // 不平铺
  background-blend-mode: luminosity; //设置背景图像或颜色的混合模式

  background-image: url('@/assets/01-cat.jpg'),
    linear-gradient(to right, yellow, white, green);

  background-image: url('@/assets/01-cat.jpg'),
    linear-gradient(135deg, red, green);

  background-image: url('@/assets/01-cat.jpg'),
    linear-gradient(to right, yellow 0%, red 40%, green 70%, blue 100%);
    

  /*辐射半径为100px，中心点在中间*/
  background-image: url('@/assets/01-cat.jpg'),
    radial-gradient(100px at center, red, green);

  // 重复渐变
  background-image: url('@/assets/01-cat.jpg'),
    repeating-linear-gradient(red 5%, green 20%);
}

效果如下：

背景图片和img标签对比

1. 背景图片不占用content内容部分，而img标签会占用。
2. 背景图片大小如果超出盒子是不会显示的，而img标签如果超出父级盒子默认是会超出显示的。
3. 何时使用背景图片，何时使用img标签并没有一个明确的标准规定，可以根据实际情况做选择。如果为了给盒子加底色为内容部分加背景，或者是加一些小图标项目符号等，则使用背景图片。如果是明确的想表达一个图片信息，也希望搜索引擎能检索到对应的图片信息，则使用img标签。

原文链接：https://juejin.cn/post/7317222425385320502 作者：Mh