background-size

  • 版本:CSS3
  • 媒体:视觉

background-size语法:

background-size<bg-size> [ , <bg-size> ]*

<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

默认值auto

适用于:所有元素

继承性:无

动画性:是,除非使用值为关键字

计算值:指定值

background-size取值:

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

background-size说明:

检索或设置对象的背景图像的尺寸大小。
  • 该属性提供2个参数值(特性值cover和contain除外)。
  • 如果提供两个,第一个用于定义背景图像的宽度,第二个用于定义背景图像的高度。
  • 如果只提供一个,该值将用于定义背景图像的宽度,第2个值默认为auto,即高度为auto,此时背景图以提供的宽度作为参照来进行等比缩放。
  • 对应的脚本特性为backgroundSize

background-size兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
支持版本\类型 IE Firefox Safari Chrome Opera
版本 6.0-8.0 4.0 5.1.7 4.0 10.0
版本 9.0

background-size示例:

2017/03/24·CSS·CSS,动画分享到:有的时候,嗯,应该说某些特定场合,我们可能需要下面这样的动画效果,渐变+animation:假设我们渐变的写法如下...3月24日

真正了解CSS3背景下的@font face规则

星期四,23:28,归类于css相关。阅读70次,今日67次byzhangxinxufromhttp://www...3月30日

“蝉原则”与CSS3随机多背景随机圆角等效果

00:36,归类于css相关。阅读107次,今日107次byzhangxinxufromhttp://www.zhangxinxu.com/wordpress/...2月17日

纯CSS3背景渐变按钮 按钮图标淡入淡出动画

们要再来分享一款纯CSS3实现的按钮动画,这款按钮动画有以下特点:当鼠标滑过按钮时,按钮上的小图标便会以爆炸的方式淡出按钮,取代它的时相应的文字,当鼠标离开按钮时...2月16日

使用margin-left,margin-top与position:absolute来对图片进行定位。使用了CSS3中的calc()来计算需要定位的值。示例图片如下:2...2016年10月9日

HTML+CSS代码及效果 body标签bgcolor属性设置网页的背景颜色

)O谢谢若有可改进与错误之处,请留言。因为心中有无数技术誓愿学的意识,所以接触HTML与CSS。2016-07-31只有代码,没有效果图。所以加效果图!注...2016年9月29日

CSS/CSS3(二):背景透明导致文字透明怎么办

苹果系列css代码如下帮助1234div{background:#000;filter:alpha(opacity=80);/*利用滤镜实现透明度80&%*/-moz-opacity:0.8...2016年6月28日

一秒提高格调!帮你快速生成网页毛玻璃背景的酷站(附CSS代码)

近年网站设计多半直接用CSS来设定颜色,有些则会使用模糊背景效果,我猜这可能从WindowsVista之后的毛玻璃特效(WindowsAero)有关,无论如何...2016年1月31日

jpg) repeat-x bottom;}第2行中属性:background,中间用,逗号隔开了,可以看到设置有两个背景图片,而不再像CSS2中定义一个背景图片就要用一个background属性...2015年10月20日

我们现在要将上图用html+css实现,并且实现背景图根据内容(BrowseCategories)的长度自适应宽。要实现这个效果,①...2015年8月15日

DOCTYPE html>测试背景图片的定位

CSS3参考手册,全网最新最全的CSS3参考手册,为你呈现最好的CSS3文档CSS3参考手册