background-size CSS属性用于设置元素背景图像的大小。背景图像可以拉伸、约束或保留其正常大小。
background-color 属性填充未被背景图像覆盖的空间。如果背景图像是透明或半透明的，则背景颜色将可见。
属性值
contain:设置图像的大小图像尽可能大以适合容器，而无需裁剪或拉伸。
cover:将图像的大小设置为尽可能小的尺寸，以适合容器而不留空白，同时保留图像的比例。
auto:设置图像的大小，以保持图像的固有比例。
<length>:根据指定的长度值，将图像向相应的方向拉伸。负值无效。
<percentage>:基于指定的背景定位区域百分比，图像沿相应方向拉伸。背景定位区域由background-origin的值确定。负值无效。
为了指定多个背景图像的尺寸，您应该使用逗号分隔每个值。
开启根据背景图像的固有尺寸和比例，其渲染尺寸按以下方式计算:
当指定了background-size的两个组成部分并且值不是auto:背景图像按照指定的大小渲染。
当background-size的值为contain或cover时:
背景图像以包含或覆盖背景定位区域的最大尺寸渲染，同时保留固有比例。
背景图像以以下尺寸渲染:当图像没有固有比例时，背景定位区域的大小。
当background-size为auto或auto auto时:
当图像同时具有水平和垂直固有尺寸时，图像将以指定尺寸渲染。
当图像具有没有固有尺寸或比例，则按照背景定位区域的大小进行渲染。
当图像没有固有尺寸，但有固有比例时，按照该值进行渲染
当图像具有一个固有维度并且具有固有比例时，它会按照该一维的大小进行渲染。其他维度是根据一维和固有比例计算的。
当图像只有一个固有维度且没有固有比例时，按照一维和其他维度进行渲染
当background-size有1个auto组件和1个非auto组件时:
当图像具有固有比例时，它会根据指定的尺寸进行拉伸。未指定的尺寸将使用指定尺寸和固有比例计算。
当图像没有固有比例时，将根据指定尺寸进行拉伸。未指定的维度，如果指定的话，使用内在维度计算；否则设置为背景定位区域对应的尺寸。
适用范围
所有 HTML 元素。
DOM 语法
object.style.backgroundSize = "cover | contain | auto | <length> | <percentage>" CSS background-size: <length>
以下示例演示background-size:150px 属性设置大小背景图像的大小为 150px -
<html>
<head>
<style>
.size-length {
background-image: url('/css/images/pink-flower.jpg');
background-size: 150px;
background-clip: padding-box;
width: 300px;
height: 300px;
border: 5px dashed;
color: rgb(25, 6, 75);
padding: 5px;
}
</style>
</head>
<body>
<div class="size-length"></div>
</body>
</html> CSS background-size: <percentage>
以下示例演示了 background-size: 90% 属性将背景图像的大小设置为 90 % −
<html>
<head>
<style>
.size-percent {
background-image: url('/css/images/pink-flower.jpg');
background-repeat: no-repeat;
background-size: 90%;
background-clip: content-box;
width: 300px;
height: 300px;
border: 5px dashed;
color: rgb(25, 6, 75);
padding: 5px;
}
</style>
</head>
<body>
<div class="size-percent"></div>
</body>
</html> CSS background-size: contains
下面的示例演示了background-size: contains属性将图像的大小设置为尽可能大以适应容器，而不需要裁剪或拉伸 -
<html>
<head>
<style>
.size-contain {
background-image: url('/css/images/pink-flower.jpg');
background-size: contain;
background-clip: content-box;
width: 300px;
height: 300px;
border: 5px dashed;
color: rgb(25, 6, 75);
padding: 5px;
}
</style>
</head>
<body>
<div class="size-contain"></div>
</body>
</html> CSS background-size: cover
以下示例演示了background-size:cover属性将图像的大小设置为尽可能小的大小以适合容器不留空白 -
<html>
<head>
<style>
.size-cover {
background-image: url('/css/images/pink-flower.jpg');
background-size: cover;
background-clip: border-box;
width: 300px;
height: 300px;
border: 5px dashed;
color: rgb(25, 6, 75);
padding: 5px;
}
</style>
</head>
<body>
<div class="size-cover"></div>
</body>
</html> CSS background-size: auto
以下示例演示了 background-size: auto 属性自动设置图像的大小以保持固有比例图像的:
<html>
<head>
<style>
.size-auto {
background-image: url('/css/images/pink-flower.jpg');
background-size: auto;
width: 300px;
height: 300px;
border: 5px dashed;
color: rgb(25, 6, 75);
padding: 5px;
}
</style>
</head>
<body>
<div class="size-auto"></div>
</body>
</html> CSS background-size: <length> <length> 值
以下示例演示了background-size:500px 150px 属性将背景图像的大小设置为 500px 宽， 150px高:
<html>
<head>
<style>
.size-auto {
border: 2px solid black;
padding: 25px;
background: url('/css/images/scenery2.jpg');
background-repeat: no-repeat;
background-size: auto;
width: 100%;
margin-bottom: 5px;
}
.size-length {
border: 2px solid black;
padding: 25px;
background: url('/css/images/scenery2.jpg');
background-repeat: no-repeat;
background-size: 500px 150px;
color: white;
}
</style>
</head>
<body>
<div class="size-auto">
<h2>Background-size: auto</h2>
<p>背景图像以其原始大小显示。</p>
</div>
<div class="size-length">
<h2>background-size:500px 150px</h2>
<p>背景图像设置为 500 像素宽和 150 像素高。</p>
</div>
</body>
</html> CSS background-size: 多个图像
以下示例演示了当存在多个背景图像时如何设置背景的大小:
这是一个包含多个图像的示例:
<html>
<head>
<style>
.multiple-images {
border: 2px solid black;
padding: 25px;
background: url('/css/images/logo.png'), url('/css/images/scenery2.jpg');
background-repeat: no-repeat;
background-size: 400px 200px, cover;
width: 500px;
height: 200px;
}
</style>
</head>
<body>
<div class="multiple-images"></div>
</body>
</html>