css怎么在背景上加图片大小

CSS 作为网页设计中必不可少的一部分，可以对网页中的元素进行各种各样的样式设置，其中设置背景图片大小是一个比较常见的需求。本篇文章将介绍 CSS 中如何在背景上加图片大小的方法。 首先，我们需要使用 background-size 属性来设置背景图片的大小。该属性有多个值可以选择，包括: auto（默认值）、长度单位、百分比、cover 和 contain。下面我们分别来讲解。 ① auto 值 auto 值表示使用原图片的大小作为背景大小，即不进行任何的缩放。 代码如下：

p {
  background-image: url('图片链接');
  background-size: auto;
}

② 长度单位或百分比 我们可以使用像素、em、cm 等长度单位或百分比来自定义背景图片的大小。长度单位表示具体的长度，而百分比则是根据容器的大小进行缩放。例子中我们把背景图片的长度设置为 200px，高度设置为 100px。 代码如下：

p {
  background-image: url('图片链接');
  background-size: 200px 100px;
}

或者使用百分比的方式进行缩放： 代码如下：

p {
  background-image: url('图片链接');
  background-size: 50% 50%;
}

③ cover 值 cover 值表示缩放背景图片以进行适应容器的大小，并且始终保持图片完全填充容器的宽度或高度。这意味着图片可能会被截断，以保证其覆盖整个容器。如果宽高比不同，这通常会导致图片在一个维度上过度放大，另一个维度上不能填满容器。 代码如下：

p {
  background-image: url('图片链接');
  background-size: cover;
}

④ contain 值 contain 值表示缩放背景图片以适应容器的大小，并且保持图片的宽高比。这意味着图片可能会留有空白以适应容器。如果宽高比不同，这通常会导致图片在一个维度上过度缩小，另一个维度上不能填满容器。 代码如下：

p {
  background-image: url('图片链接');
  background-size: contain;
}

综上所述，我们可以使用 background-size 属性来设置背景图片的大小。根据需求，选择合适的值完成图片大小的调整。