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>
效果图: