• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
    •
    位置： css 中文手册 -> css 样式 -> css 背景颜色

    background-size

    版本：CSS3

    background-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

    示例

    /* 关键字 */
background-size: cover;
background-size: contain;

/* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */
background-size: 50%;
background-size: 3em;
background-size: 12px;
background-size: auto;

/* 两个值 */
/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

/* 逗号分隔的多个值：设置多重背景 */
background-size: auto, auto;    /* 不同于background-size: auto auto */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

/* 全局属性 */
background-size: inherit;
background-size: initial;
background-size: unset;

    语法：

    background-size：[ <length>| <percentage>| auto ]| cover | contain

    取值：

    • <length>：用长度值指定背景图像大小。不允许负值。
    • <percentage>：用百分比指定背景图像大小。不允许负值。
    • auto：背景图像的真实大小。
    • cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
    • contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

    位图一定有固有尺寸与固有比例，矢量图可能两者都有，也可能只有一个。渐变视为只有固有尺寸或者只有固有比例的图片。

    背景图片大小计算

    • 如果指定了 background-size 的两个值并且不是auto：背景图片按指定大小渲染。
    • contain 或 cover:保留固有比例，最大的包含或覆盖背景区。如果图像没有固有比例，则按背景区大小。
    • auto 或 auto auto:图像如果有两个长度，则按这个尺寸。如果没有固有尺寸与固有比例，则按背景区的大小。如果没有固有尺寸但是有固有比例，效果同 contain。如果有一个长度与比例，则由此长度与比例计算大小。如果有一个长度但是没有比例，则使用此长度与背景区相应的长度。
    • 一个为 auto 另一个不是auto:如果图像有固有比例，则指定的长度使用指定值，未指定的长度由指定值与固有比例计算。如果图像没有固有比例，则指定的长度使用指定值，未指定的长度使用图像相应的固有长度，若没有固有长度，则使用背景区相应的长度。
    • 注意，对于没有固有尺寸或固有比例的矢量图不是所有的浏览器都支持。特别注意测试Firefox 7-与Firefox 8+，以确定不同之处能否接受。
    默认值auto
    适用于所有元素。它也适用于::first-letter和::first-line。
    继承性无
    动画性是
    计算值按规定，但相对长度转换为绝对长度
    <div id="container">

  <div class="subcontainer contain">contain</div>
  <div class="subcontainer cover">cover</div>
  <div class="subcontainer width">120px</div>
  <div class="subcontainer width-height">120px 200px</div>

</div>

    #container {
   width: 100%;
   display:flex;
   justify-content: space-around;
   height: 300px;
   overflow: scroll;
}

.subcontainer {
  width: 100%;
  max-width: 200px;
  margin: 8px;
  padding: 5px;
  background-image: url("eagle.jpg");
  background-repeat: no-repeat;
  color: white;
  font-family: monospace;
}

.contain {
  background-size: contain;
}

.cover {
  background-size: cover;
}

.width {
  background-size: 120px;
}

.width-height {
  background-size: 120px 200px;">每个值可以是<length>,是<percentage>,或者auto.


    示例：

    background-size: contain;
background-size: 50%;
background-size: 3em;
background-size: auto 1em;
background-size: 50% 25%;

    .bar {
       width: 50px; height: 100px;
       background-image: gradient(...);

       /* 不推荐 */
       background-size: 25px;
       background-size: 50%;
       background-size: auto 50px;
       background-size: auto 50%;

       /* 可行 */
       background-size: 25px 50px;
       background-size: 50% 50%;
}

    特别不推荐对渐变px与auto一起用，因为Firefox 8之前不能重复渲染，并且对于没有实现Firefox 8渲染特性的浏览器，不知道指定了背景的元素的确切大小。

    <!DOCTYPE html>
<html>
<head>
<style>
div{
	width:450px;
	height:300px;
	background-size:100px 100px;
	background-image:url("bird.png");
	background-repeat:no-repeat;

}
</style>
</head>
<body>
<div></div>
</body>
</html>

    效果图：

    上篇：background-clip