background 背景类八大属性
背景颜色(当同时定义了背景颜色和背景图像时,背景图像覆盖在背景颜色之上) background-image: 背景图像background-repeat: 背景图像如何铺排填充
repeat-x: 背景图像在横向上平铺 repeat-y: 背景图像在纵向上平铺 repeat: 背景图像在横向和纵向平铺 no-repeat: 背景图像不平铺 background-attachment : 设置或检索背景图像是随对象内容滚动还是固定的
fixed: 背景图像相对于窗体固定。 scroll: 背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。 background-position: 设置或检索对象的背景图像位置
<percentage>
: 用百分比指定背景图像填充的位置。可以为负值。<length>
: 用长度值指定背景图像填充的位置。可以为负值。center: 背景图像横向和纵向居中。 left: 背景图像在横向上填充从左边开始。 right: 背景图像在横向上填充从右边开始。 top: 背景图像在纵向上填充从顶部开始。 bottom: 背景图像在纵向上填充从底部开始。 如果提供四个
,每个或偏移前都必须跟着一个关键字(即left | center | right | top | bottom),偏移量相对关键字位置进行偏移。 示例:假设要定义背景图像在容器中右下方,并且距离右边和底部各有20px
缩写方式: background:url(test1.jpg) no-repeat right 20px bottom 20px;
如果提供三个:
拆分方式: background:url(test1.jpg) no-repeat left bottom 10px; 要注意的是:设置3个或4个值,偏移量前必须有关键字。也就是说,形如:”10px bottom 20px” ,这样的参数设置是错误的,因为10px前面没有关键字。如果提供两个
,第一个用于横坐标,第二个用于纵坐标。如果只提供一个
,该值将用于横坐标;纵坐标将默认为50%(即center)background-origin: 设置或检索对象的背景图像计算 <’ background-position ‘> 时的参考原点(位置)
padding-box: 从padding区域(含padding)开始显示背景图像。 border-box: 从border区域(含border)开始显示背景图像。 content-box: 从content区域开始显示背景图像。 background-clip :指定对象的背景图像向外裁剪的区域
padding-box: 从padding区域(不含padding)开始向外裁剪背景。 border-box: 从border区域(不含border)开始向外裁剪背景。 content-box: 从content区域开始向外裁剪背景。 text: 从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果 background-size: 检索或设置对象的背景图像的尺寸大小
<length>
: 用长度值指定背景图像大小。不允许负值。<percentage>
: 用百分比指定背景图像大小。不允许负值。auto: 背景图像的真实大小。 cover: 将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。 contain: 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。 如果提供两个,第一个用于定义背景图像的宽度,第二个用于定义背景图像的高度。 如果只提供一个,该值将用于定义背景图像的宽度,第2个值默认为auto,即高度为auto,此时背景图以提供的宽度作为参照来进行等比缩放
转载于:https://www.cnblogs.com/zhangyongxi/p/9535389.html