Background-size使用详解

简介

CSS样式中的background-size属性用于指定一个背景图片的尺寸大小。该属性可接受一个或两个数值作为参数，其中第一个参数为图片宽度值，第二个参数为图片高度值。也可以使用关键字来代替尺寸数值，常用的关键字有：cover和contain。cover会将背景图像缩放到最大尺寸以填充整个容器，而contain则会将图像缩小到最小尺寸以适应整个容器。

语法

background-size: auto|length|percentage|cover|contain|initial|inherit;

实例

div {
  /* 以百分比设置背景图像的尺寸 */
  background-size: 50% 50%;
}

div {
  /* 使用像素值设置背景图像的尺寸 */
  background-size: 300px 200px;
}

div {
  /* 使用关键词cover缩放背景图像 */
  background-size: cover;
}

div {
  /* 使用关键词contain缩放背景图像 */
  background-size: contain;
}

示例1

假设有一个div，其宽度为500px，高度为300px。我们需要将一张大小为1000x600的图片作为该div的背景图像。为了使背景图像铺满整个div，可以使用如下代码：

div {
  background-image: url('image.jpg');
  background-size: 100% 100%;
}

示例2

假设有一个div，其宽度为500px，高度为300px。我们需要将一张大小为1000x600的图片作为该div的背景图像。为了保持背景图片的纵横比例，可以使用如下代码：

div {
  background-image: url('image.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

在这个例子中，我们将背景大小设置为contain以保持纵横比例，然后使用background-repeat设置为no-repeat以防止图片重复显示，最后使用background-postion将图片的位置设置为中间居中。