返回

切勿再纠结背景尺寸，CSS3让设置背景尺寸更加简单

前端

背景尺寸

CSS3中的background-size属性可以用来设置背景图片的尺寸，它支持两种不同的值：像素和百分比。像素值可以精确地指定背景图片的宽度和高度，而百分比值则会根据容器的尺寸自动调整背景图片的大小。

语法

background-size属性的语法如下：

background-size: <size> | <percentage> | <auto> | <contain> | <cover>;
  • <size>：指定背景图片的宽度和高度，可以使用像素值或百分比值。
  • <percentage>：指定背景图片的宽度和高度，相对于容器的尺寸。
  • <auto>：让浏览器根据背景图片的原始尺寸自动调整背景图片的大小。
  • <contain>：让浏览器调整背景图片的大小，以确保背景图片完全显示在容器中，并且不超出容器的边界。
  • <cover>：让浏览器调整背景图片的大小，以确保背景图片完全覆盖容器，并且不留有任何空白区域。

用法

background-size属性可以应用于任何元素，但最常用于<body>、<div>和<img>元素。要使用background-size属性，只需在CSS代码中添加以下代码：

background-size: <size> | <percentage> | <auto> | <contain> | <cover>;

例如，以下代码将背景图片的宽度和高度设置为100像素：

background-size: 100px 100px;

以下代码将背景图片的宽度和高度设置为容器尺寸的50%：

background-size: 50% 50%;

以下代码将让浏览器根据背景图片的原始尺寸自动调整背景图片的大小：

background-size: auto;

以下代码将让浏览器调整背景图片的大小，以确保背景图片完全显示在容器中，并且不超出容器的边界：

background-size: contain;

以下代码将让浏览器调整背景图片的大小，以确保背景图片完全覆盖容器，并且不留有任何空白区域：

background-size: cover;

兼容性

background-size属性兼容到IE9。在IE8及更早版本的浏览器中，background-size属性无效。

结论

background-size属性是一个非常强大的属性，它可以帮助您更轻松地设置背景图片的尺寸。通过使用background-size属性，您可以创建出各种各样的视觉效果，让您的网页更加美观。