CSS background-size
CSS background-size
CSS
background-size 属性用于设置元素的背景图像的大小。可以拉伸或限制背景图像以适合现有空间。它允许我们控制背景图像的缩放。
background-size 属性用于设置元素的背景图像的大小。可以拉伸或限制背景图像以适合现有空间。它允许我们控制背景图像的缩放。
可以使用
百分比或
关键字值定义此属性。它有两个可能的关键字值，分别为
contain和
cover 。它的单值语法定义了图像的宽度（在这种情况下，高度设置为auto），而双精度值定义了height和width的值，其中第一个值设置宽度，第二个值设置高度。
百分比或
关键字值定义此属性。它有两个可能的关键字值，分别为
contain和
cover 。它的单值语法定义了图像的宽度（在这种情况下，高度设置为auto），而双精度值定义了height和width的值，其中第一个值设置宽度，第二个值设置高度。
如果一个元素具有多个背景图像，我们可以定义逗号分隔的值来定义每个背景图像的大小。
cover 值
background-size 属性用于覆盖元素的整个背景区域。相比之下，此属性的
contain 值会尽可能缩放图像，而不会裁剪图像。
background-size 属性用于覆盖元素的整个背景区域。相比之下，此属性的
contain 值会尽可能缩放图像，而不会裁剪图像。
语法
background-size: auto | length | cover | contain | initial | inherit;
此属性的值定义如下。
属性值
auto：这是默认值，它将以原始大小显示背景图像。
length： ：用于设置背景图像的宽度和高度。该值在给定长度的相应维度上拉伸图像。它的单个值指定图像的宽度，而高度设置为自动。如果给出两个值，则第一个值设置宽度，第二个值设置高度。不允许使用负值。
percentage：将背景图像的宽度和高度定义为背景定位区域的百分比（％）。不允许使用负值。
cover：用于调整背景图片的大小以覆盖整个容器。有时，它会从边缘之一上修剪掉一点或拉伸图像。
contain：：在不拉伸或裁剪的情况下，它调整背景图像的大小以确保图像完全可见。
initial：将属性设置为其默认值。
inherit：它从其父元素继承该属性。
通过一些说明，让我们理解
CSS属性。
CSS属性。
示例
在此示例中，存在三个div元素，其宽度为300px，高度为200px。每个div元素都有一个背景图片，我们将在其中应用
background-size 属性。
background-size 属性。
在这里，我们使用长度和百分比值来设置div的背景大小元件。第一个div元素的
背景尺寸设置为
自动，第二个div元素的设置
150px 150px ，并且
background-size 的第三个div元素设置为
30％。
背景尺寸设置为
自动，第二个div元素的设置
150px 150px ，并且
background-size 的第三个div元素设置为
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 属性的
cover，contain，和
initial 值。
background-size 属性的
cover，contain，和
initial 值。
示例
<!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-size 属性。
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>
输出
