background-size

CSS中background-size属性是background属性中最有用同时也是最复杂的属性。你可以用该属性使用很多变种和不同语法，所有这些都有不同的用例。下面是一个基本的例子：

html {
  background: url(greatimage.jpg);
  background-size: 300px 100px; 
}

　　

这是background-size双值语法的一个示例。你可以使用该属性四种不同的语法：关键字语法、单值语法、双值语法以及多背景语法。

关键字

除了默认值(auto)之外，你可以让双关键字与background-size一起使用：cover和contain。

区别

cover 告诉浏览器确保图片总是覆盖整个容器，即使它必须拉伸图片或者从其中一个边缘剪切掉一点内容。从另从另一方面来说，contain 则表示总是展示全部的图片，即便这样会在侧面或底部留下一点空间。

默认关键字—auto—告诉浏览器基于图片的实际尺寸和宽高比自动计算尺寸。

单值

如果你仅提供一个值(例如 background-size:400px;)，则计算宽度并且高度设置为auto。你能使用任何你喜欢的CSS大小单位，包括像素、百分比、em、视口单位等等。

双值

如果提供两个值，第一个值设置背景图片宽度，第二个值设置高度。像单值语法一样，你可以使用任何你喜欢的度量单位。

多个图像

你还可以组合上面的任何方法并将它们应用于多个图像，只需要在每个语法之间添加逗号即可。例如：

html {
  background: url(greatimage.jpg), url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /* 第一个图像是 300x100, 第二个图像覆盖了全部区域*/
}　　

使用多个背景图片时，请记住背景图片的堆叠顺序。

演示

此演示展示了cover、contain和多背景图混合像素和关键字的示例。

background-size示例图片

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>background-size</title>
  <meta name='description' content='background-size'>
  <meta name='keywords' content='background-size'>
  <style>
    div {
      width: 900px;
      height: 400px;
      border: 1px solid black;
      background-image: url(ferns-unsplash.jpg); 
      background-repeat: no-repeat;
    }

    #cover {
      background-size: cover;
    }

    #contain {
      background-size: contain;
    }

    #multi {    
     background-image: url(rectangle-overlay.png), url(ferns-unsplash.jpg);
      background-size: 300px 100px, cover;
    }

    /* styling for pen, unrelated to background-size */
    body {
      font-family: sans-serif;
    }
  </style>

</head>

<body>
  <!-- image from unsplash.com -->
  <h2>background-size: cover;</h2>
  <div id="cover">
  </div>

  <h2>background-size: contain;</h2>
  <div id="contain">
  </div>

  <h2>Multiple Images</h2>
  <p>Semi-transparent white overlay at top left and fern image. Overlay sized in pixels, fern image set to cover. </p>
  <div id="multi">
  </div>
</body>

</html>

background-size: cover;

 

background-size: contain;

 

多个图片

左上角的半透明白色覆盖层和蕨图像。 叠加的图片设置像素大小，蕨图像设置关键字cover。

 
posted @ 2019-08-26 11:26  请叫我二狗哥  阅读(353)  评论(0)    收藏  举报