在 CSS 中相对于父元素设置背景图像的宽度和高度

在编写 CSS 样式时，我们经常需要为元素设置背景图像。如果我们想要相对于父元素来设置背景图像的宽度和高度，应该怎么做呢？本文将为大家介绍如何使用百分比来设置背景图像的宽度和高度。

设置背景图像

在 CSS 样式中，我们可以使用 background-image 属性来设置元素的背景图像。例如：

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

这样我们为 div 元素设置了一张名为 image.jpg 的背景图像。但是，这并没有指定这张图像在元素中应该如何显示，也就是它的宽度和高度。

设置背景图像大小

为了设置背景图像的大小，我们可以使用 background-size 属性。这个属性可以接受多个值，包括长度值、百分比和关键字。例如：

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

这样我们为 div 元素设置了一张背景图像，同时指定了它的宽度为 100px，高度为 200px。但是，这样设置的大小是固定的，无论元素的大小如何，背景图像的大小都不会改变。

相对于父元素设置背景图像大小

如果我们想要背景图像的大小可以相对于父元素自适应缩放，就需要使用百分比来设置它的宽度和高度。但是需要注意的是，设置百分比的值是相对于背景图像的实际大小而言的，而不是相对于父元素的大小。

对于 background-size 属性，可以使用百分比作为值。例如：

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

这样我们为 div 元素设置了一张背景图像，同时使用百分比来指定它的宽度和高度，这两个值都为 50%。这意味着，背景图像的大小会相对于其实际大小自适应缩放，并且这个缩放是相对于父元素的大小而言的。

总结

在 CSS 样式中，我们可以使用 background-image 属性来设置元素的背景图像。使用 background-size 属性可以设置背景图像的大小，支持多种单位，包括百分比。使用百分比作为值可以相对于背景图像的实际大小而言进行缩放，同时这个缩放是相对于父元素的大小而言的。有了这些知识，我们就可以轻松地设置相对于父元素的背景图像大小了！