background 背景类八大属性
background 背景类八大属性
- 背景颜色（当同时定义了背景颜色和背景图像时，背景图像覆盖在背景颜色之上）
- background-image：背景图像
-
background-repeat：背景图像如何铺排填充
- repeat-x： 背景图像在横向上平铺
- repeat-y： 背景图像在纵向上平铺
- repeat： 背景图像在横向和纵向平铺
- no-repeat： 背景图像不平铺
-
background-attachment :设置或检索背景图像是随对象内容滚动还是固定的
- fixed： 背景图像相对于窗体固定。
scroll： 背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
- fixed： 背景图像相对于窗体固定。
-
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，此时背景图以提供的宽度作为参照来进行等比缩放
-
版权声明：本文为zhangyongxi原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。