CSS背景:background

background简介
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-origin ]和[ background-clip ]设置了相同的值。可这样缩写:



来源:http://caibaojian.com/css3/properties/background/background.htm
2020-01-16 10:37 举报

关于挟翼

挟翼一款提供UI页面设计的软件。
您只需要动一动鼠标绘制相关的元素,软件会自动帮你完成CSS样式和HTML代码。
从现在开始注册,立即赠送一年VIP会员。活动结束日期待定。