CSS background-size属性用法及代码示例

background-size CSS 属性用于设置元素背景图像的大小。可以拉伸或约束背景图像以适应现有空间。它允许我们控制背景图像的缩放。

可以使用长度、百分比或关键字值来定义此属性。它有两个可能的关键字值，分别是包含和覆盖。它的 single-value 语法定义了图像的宽度(在这种情况下，高度设置为自动)，而双精度值定义高度和宽度的值，其中第一个值设置宽度，第二个值设置高度。

如果一个元素有多个背景图片，我们可以定义逗号分隔的值来定义每一个的不同大小。

background-size 属性的cover 值用于覆盖元素的整个背景区域。相反，该属性的 contains 值会在不裁剪图像的情况下尽可能地缩放图像。

用法

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

该属性的值定义如下。

属性值

auto:这是默认值，以原始大小显示背景图像。

length:它用于设置背景图像的宽度和高度。该值在给定长度的相应维度上拉伸图像。它的单个值指定图像的宽度，高度设置为自动。如果给出两个值，第一个值设置宽度，第二个值设置高度。它不允许负值。

percentage:该值定义了背景图像的宽度和高度与背景定位区域的百分比 (%)。不允许使用负值。

cover:此值用于调整背景图像的大小以覆盖整个容器。有时，它会裁剪掉一个边或拉伸图像。它会调整图像大小以确保元素被完全覆盖。

contain:在不拉伸或裁剪的情况下，它会调整背景图像的大小以确保图像完全可见。

initial:它将属性设置为其默认值。

inherit:它从其父元素继承属性。

让我们通过一些插图来理解这个 CSS 属性。

示例

在这个例子中，有三个 div 元素，宽度为 300px，高度为 200px。每个 div 元素都有一个 background-image，我们在其上应用 background-size 属性。

这里我们使用长度和百分比值来设置 div 元素的 background-size。第一个div元素的background-size设为auto，第二个div元素设为150px 150px，第三个div元素的background-size设为30%。

<!DOCTYPE html>
<html>
<head>
<title>
background-size property
</title>
<style>
div {
width:300px;
height:200px;
border:2px solid red;
}
#div1{
background-image:url('lion.png');
background-size:auto;
}
#div2{
background-image:url('lion.png');
background-size:150px 150px;
}
#div3{
background-image:url('lion.png');
background-size:30%;
}
</style>
</head>

<body>
<h2> background-size:auto; </h2>
<div id = "div1"></div>
<h2> background-size:150px 150px; </h2>
<div id = "div2"></div>
<h2> background-size:30%; </h2>
<div id = "div3"></div>
</body>
</html>

输出

现在，在下一个示例中，我们将使用 background-size 属性的覆盖、包含和初始值。

示例

<!DOCTYPE html>
<html>
<head>
<title>
background-size property
</title>
<style>
div {
width:300px;
height:250px;
border:2px solid red;
background-repeat:no-repeat;
}
#div1{
background-image:url('lion.png');
background-size:contain;
}
#div2{
background-image:url('lion.png');
background-size:cover;
}
#div3{
background-image:url('lion.png');
background-size:initial;
}
</style>
</head>

<body>
<h2> background-size:contain; </h2>
<div id = "div1"></div>
<h2> background-size:cover; </h2>
<div id = "div2"></div>
<h2> background-size:initial; </h2>
<div id = "div3"></div>
</body>
</html>

输出

示例 - 组合多个图像

我们还可以组合此属性的值，并将它们应用于多个图像。它可以通过逗号分隔的语法来完成。

在这个例子中，有三个 div 元素，每个元素有两个 background-images。现在，我们在两个图像上应用 background-size 属性。

<!DOCTYPE html>
<html>
<head>
<title>
background-size property
</title>
<style>
div {
width:250px;
height:250px;
border:2px solid red;
background-repeat:no-repeat;
background-position:center;
}
#div1{
background-image:url('lion.png'), url('forest.jpg');
background-size:300px 150px, cover;
}
#div2{
background-image:url('lion.png'), url('forest.jpg');
background-size:200px 150px, 300px 200px;
}
#div3{
background-image:url('lion.png'), url('forest.jpg');
background-size:150px 175px, contain;
}
</style>
</head>

<body>
<h2> background-size:300px 150px, cover; </h2>
<div id = "div1"></div>
<h2> background-size:200px 150px, 300px 200px; </h2>
<div id = "div2"></div>
<h2> background-size:150px 175px, contain; </h2>
<div id = "div3"></div>

</body>
</html>

输出

相关用法

注：本文由纯净天空筛选整理自 CSS background-size property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。