CSS background-size 属性-之路教程

语法

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

background-size 属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/bg.jpg");
        background-size: 300px 200px;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>背景图大小示例</h2>
    <p>经历过风雨，才懂得阳光的温暖</p>
  </body>
</html>

在上面的示例中，应用了长度值。
它设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果给出一个值，则第二个值设置为“自动”。

请参阅另一个示例，其中背景图像的宽度和高度由百分比定义。

具有 "%" 值的 background-size 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/bg.jpg");
        background-size: 40% 100%;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>背景图大小示例</h2>
    <p>经历过风雨，才懂得阳光的温暖</p>
  </body>
</html>

“cover”值在不拉伸图像的情况下使图像尽可能大。

具有 "cover" 值的 background-size 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/bg.jpg");
        background-size: cover;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>背景图大小示例</h2>
    <p>经历过风雨，才懂得阳光的温暖</p>
  </body>
</html>

具有“contain”值的 background-size 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/bg.jpg");
        background-size: contain;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>背景图大小示例</h2>
    <p>经历过风雨，才懂得阳光的温暖</p>
  </body>
</html>

具有 "auto" 值的 background-size 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/bg.jpg");
        background-size: auto;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>背景图大小示例</h2>
    <p>经历过风雨，才懂得阳光的温暖</p>
  </body>
</html>

具有“长度”值的 background-size 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 260px;
        height: 190px;
        background: url("/bg.jpg") no-repeat;
        background-size: 260px;
      }
    </style>
  </head>
  <body>
    <h1>CSS background-size 属性示例 </h1>
    <p>具有长度值的 background-size 属性示例。</p>
    <div></div>
  </body>
</html>

CSS background-size 属性值说明

值	说明
auto	这是默认值。它将背景图像设置为其原始大小。
length	设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只给定一个值，则第二个值设置为自动。它由“px”、“em”指定。
percentage	按百分比设置宽度和高度。第一个值设置宽度，第二个值设置高度。如果只给定一个值，则第二个值设置为自动。
cover	将背景图像缩放到尽可能大的范围以覆盖所有背景区域。
contain	将背景图像缩放到最大大小，以便其宽度和高度可以填充内容区域内。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

CSS background-size 属性

background-size 属性用于定义背景图像的大小。

background-size 属性是 CSS3 属性之一。

此属性有五个值：auto（自动）, length（长度）, percentages（百分比）, cover（覆盖）, contain（包含）。
自动将背景图像设置为其原始大小。
这是默认值。
长度指定背景图像的高度和宽度。

负值是无效的值。
百分比设置由百分比指定的背景图像的高度和宽度。
这里的负值也是无效的。

Cover 尽可能大地缩放图像而不拉伸图像。
如果图像的比例与元素不同，则将其垂直或者水平裁剪，以便不留空间。

包含调整背景图像的大小，使图像完全可见。

有些图像（如 JPEG）具有固有的大小和比例，而图像（如渐变）则没有固有的大小和比例。
除非另有说明，否则第二个总是占据元素背景区域的大小。

background-size 属性也采用逗号分隔值，当元素有多个背景图像时，每个值都将应用于匹配的背景图像。
例如，第一个值应用于第一个背景图像，第二个值应用于第二个图像等。

初始值	auto
应用于	所有元素。它也适用于：::first-letter 和 ::first-line。
继承	无效
可动画的	对。背景图像的大小是可设置动画的。
版本	CSS3
DOM 语法	object.style.backgroundSize=“50% 100%”；

日期：2020-06-02 22:14:16 来源：oir作者：oir

←CSS background-repeat 属性

CSS ::before 伪元素→

语法