详解css:background

Posted 2021-01-31 cui-ting

连写：

background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：

background:背景颜色 背景图片地址 参考点 背景平铺 背景滚动 背景位置/尺寸

background：rgba()  url()  content-box repeat-x fixed  20% 20%/100px 20px 

background-clip:content-box;(背景裁剪单独写)

具体介绍：

1）background-color  定义背景的颜色以及透明度  背景颜色始终填充到border以内的所有区域内（见下面的图），不受background-origin影响，后者只决定

　　background-image的参考原点！默认值：transparent（透明的） 改变透明度的写法： rgba(255,255,0,0.5)

2）background-image：url()  定义背景图片的地址

3）background-origin  定义背景图片的开始显示的参考原点  默认值：padding-box

　　padding-box：从padding区域（含padding）开始显示背景图像。

　　border-box：从border区域（含border）开始显示背景图像。

　　content-box：从content区域开始显示背景图像。 

                                                                background-origin:content-box                                                       

　　　　　　　　　　　　　　　　　　　background-origin:padding-box(默认参考)

        

　　　　　　　　　　　　　　　　　　　　　　　background-origin:border-box                                   

 

4）background-repeat   定义背景图填充方式 默认repeat

    取值：

　　repeat-x：背景图像在横向上平铺

　　repeat-y：背景图像在纵向上平铺

　　repeat：背景图像在横向和纵向平铺

　　no-repeat：背景图像不平铺

　　round：背景图像自动缩放直到适应且填充满整个容器。（CSS3）

　　space：背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3） 

5）background-attachment :fixed（默认） || scroll || local

　　fixed：背景图像相对于窗体固定。

　　scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。

　　local：背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。（CSS3）

6）background-position 相对于background-origin定义的参考区域来定位的！！与盒子的类型(box-sizing)无关   ;详见上一篇随笔

7) background-size 默认值auto

　　<length>：用长度值指定背景图像大小。不允许负值。

　　<percentage>：用百分比指定背景图像大小。不允许负值。

　　auto：背景图像的真实大小。

　　cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。

　　contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。 

8） background-clip   定义裁剪背景图的区域

　　padding-box：从padding区域（不含padding）开始向外裁剪背景。

　　border-box：从border区域（不含border）开始向外裁剪背景。

　　content-box：从content区域开始向外裁剪背景。

　　text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果