background

  • 版本:CSS1/3
  • 媒体:视觉
background属性在CSS背景中是比较常用的,本文将带你深入理解background属性的各个方面,包括它的语法、取值、作用和浏览器兼容性,最后附上background的演示案例,希望能够对你有所帮助。

background的具体语法

background:[ <bg-layer>, ]* <final-bg-layer>

<bg-layer> = [ background-image ] || [ background-position ] [ / background-size ]? || [ background-repeat ] || [ background-attachment ] || [ [ background-origin ] || [ background-clip ] ]{1,2}

<final-bg-layer> = [ background-color ] || [ background-image ] || [ background-position ] [ / background-size ]? || [ background-repeat ] || [ background-attachment ] || [ [ background-origin ] || [ background-clip ] ]{1,2}

默认值看每个独立属性

适用于:所有元素

继承性:无

动画性:看每个独立属性

计算值:看每个独立属性

background的取值介绍

[ background-color ]:
指定对象的背景颜色。
[ background-image ]:
指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”
[ background-repeat ]:
指定对象的背景图像如何铺排填充。
[ background-attachment ]:
指定对象的背景图像是随对象内容滚动还是固定的。
[ background-position ]:
指定对象的背景图像位置。
[ background-origin ]:
指定对象的背景图像显示的原点。
[ background-clip ]:
指定对象的背景图像向外裁剪的区域。
[ background-size ]:
指定对象的背景图像的尺寸大小。

background的使用说明

复合属性。检索或设置对象的背景特性(背景色background-color不能设置多组)。
  • 一个元素可以设置多重背景图像。
  • 每组属性间使用逗号分隔。
  • 如果设置的多重背景图之间存在着交集(即存在着重叠关系),前面的背景图会覆盖在后面的背景图之上。
  • 示例:假设要在同一个元素上定义3个背景图像

    缩写方式:

    background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px content-box padding-box,
    	   url(test1.jpg) no-repeat scroll 10px 20px/70px 90px content-box padding-box,
    	   url(test1.jpg) no-repeat scroll 10px 20px/110px 130px content-box padding-box #aaa;

    注意,background-color只能设置一次,且由于写在前面的背景会叠在之后的背景之上,所以背景色通常都定义在最后一组上,避免背景色将图像盖住。

    拆分方式:

    background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);
    background-repeat:no-repeat,no-repeat,no-repeat;
    background-attachment:scroll,scroll,scroll;
    background-position:10px 20px,10px 20px,10px 20px;
    background-size:50px 60px,70px 90px,110px 130px;
    background-origin:content-box,content-box,content-box;
    background-clip:padding-box,padding-box,padding-box;
    background-color:#aaa;
  • 如果定义了多个背景图片,而其他属性只有一个参数值,则表明所有背景图片的该属性都应用同一个参数值。据此可以对上面的例子进行缩写:

    缩写方式:

    background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);
    background-repeat:no-repeat;
    background-attachment:scroll;
    background-position:10px 20px;
    background-size:50px 60px,70px 90px,110px 130px;
    background-origin:content-box;
    background-clip:padding-box;
    background-color:#aaa;

    如果定义了多个背景图片,而[ background-origin ]和[ background-clip ]设置了相同的值。可这样缩写:

    缩写方式:

    background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px padding-box,
    	   url(test1.jpg) no-repeat scroll 10px 20px/70px 90px padding-box,
    	   url(test1.jpg) no-repeat scroll 10px 20px/110px 130px padding-box #aaa;

    这表示[ background-origin ]和[ background-clip ]都使用了padding-box参数值。

background的浏览器兼容性

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
支持版本\类型 IE Firefox Safari Chrome Opera
版本 6.0-8.0 #1 #2 #3 4.0-17.0 #2 #3 5.1.7 #2 #3 22 11.5
版本 9 #3 18.0-21.0 #3
版本 10.0 22.0
  1. 不支持:多组背景图像。
  2. 不支持:[ background-size ] 写入缩写方式。
  3. 不支持:[ background-origin ] || [ background-clip ] 写入缩写方式。

background的完整演示案例

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参考手册