css3中背景属性background-size

2019-03-22243次阅读css3css

background-size属性是背景属性之一,此属性可以使用四种不同的语法:关键词语法、一个值语法、两个值语法和多背景语法。

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

关键词

除了默认值(auto),还有两个关键字可以用于背景大小:cover和contain

  • cover:告诉浏览器要确保图像始终覆盖整个容器,即使它必须拉伸图像或从其中一个边缘剪下一点。
  • contain:表示始终显示整个图像,即使这样会在侧面或底部留下一点空白。
  • 默认关键字auto:告诉浏览器根据图像的实际大小和纵横比自动计算大小。

一个值

如果只提供一个值(例如,背景大小:400px),它将计算宽度,并将高度设置为自动。您可以使用任何CSS大小的单位,包括像素、百分比、ems、

viewport units视区单位等。

两个值

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

多背景

您还可以组合上述任何方法并将它们应用于多个图像,只需在每个语法之间添加逗号即可。例子:

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

使用多个图像时,请记住背景图像的堆叠顺序,第一幅永远在最上面,后面以此类推。

浏览兼容:IE9+

上一篇: git冲突:Please commit your changes or stash them before you merge  下一篇: CSS中背景属性background-position  

css3中背景属性background-size相关文章