background属性详解

Posted 2020-09-07

background是个常用的属性，包含background-color,background-image,background-attachment,background-size,background-repeat,background-origin,background-clip,background-position。。。。，着实有点长。

     1.background-color：背景色，没啥好说
     2.background-image：背景图片，通过url()引用，同样没啥
     3.background-attachment：设置背景图片是否随页面其他部分滚动,有fixed(不随其他部分滚动),scroll(默认，随其他部分滚动),inherit(从父元素继承background-attachment属性的设置)
     4.background-size：设置图片的大小,有length(设置宽度和高度,如20px,20px)，percentage(设置宽度和高度的百分比,10%,20%),cover(覆盖整个背景区域),contain(将图片宽高等比例扩大尽量占满整个背景区域)
     5.background-repeat: 定义图片重复的方式,有repeat(默认，图片在水平和垂直方向重复)，repeat-x(背景图像在水平方向重复)，repeat-y(背景图像在垂直方向重复),no-repeat(背景图像仅显示原来的大小),inherit(从父元素继承)
　　6.background-origin：规定background-position相对于什么位置来定位，有padding-box(相对于内边框来定位),border-box(相对于边框盒来定位)，content-box(相对于内容框来定位)。特别注意:如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。
　　7.background-clip：规定背景的绘制区域，有border-box(包含border在内的所有内容)，padding-box(包含padding和content)，content-box(只包含content)

　　8.background-position：设置背景图像的起始位置。取值有

　　(1)用关键词设置，若只设置了一个值第二个默认为center。第一个值为距离顶部位置，第二个值为距左边位置。默认为0%,0%

• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right

　　(2)用百分比设置，若第二个值未设置默认为50%.第一个值为水平位置，第二个为垂直位置

　　x% y%

　　(3)用具体的值设置，如20px等css单位。值的意义同上

　　xpos ypos