background相关整理

background :

background-color,background-image,background-repeat,background-attachment,background-position,background-clip,background-origin;

background-attachment : scroll / fixed;

scroll是默认值，背景图片随着滚动条的滚动而滚动；

fixed是背景图片固定，不会随着滚动条的滚动而变化（可以模拟QQ页面效果的实现：https://im.qq.com/）

background-position:百分比/left/top/bottom/right/数值

默认是(0,0) 相对于左上角的位置

background-size:auto/百分比或固定数值/cover/contain

auto:保持原有背景图片的宽度和高度

百分比：只能应用在块级元素上，所设背景图片的大小依据块元素的对应百分比计算，如果只设定一个值，第二个值为auto(与第一个值相同)

cover:铺满的最小效果（有一边铺满即止），但是会引起图片的失真

contain:铺满的最大方案（两边都铺满才可以），同样会引起图片的失真

background-clip:border-box/padding-box/content-box

对应的是背景将分别裁剪超过border/padding/content部分的内容

背景图片示意图

其中，如果是背景色，将从border边缘的左上角和右下角部分开始渲染

而，如果是背景图片，将从padding的左上角和border的右下角部分开始渲染

因此，设置该属性后，超出的不同位置会被裁减掉。

PS:图片填充文本的效果实现        

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

背景图片填充文本

background-origin:padding-box/border-box/content-box

具体方式基本同background-clip，主要是设置背景图片的起始位置

多背景：

可以用逗号分隔设置多个背景，注意多个背景的重叠关系是越后面定义的背景图层级越低

多背景

这里主要使用了五张背景图，上下左右四个角是四张，整体是一张重复的背景，可以用于设定响应式的背景，将宽高由内容撑开。

.multipleBg{

        background : 

            url("../images/bg-tl.png") no-repeat left top,

            url("../images/bg-tr.png") no-repeat right top,

            url("../images/bg-bl.png") no-repeat left bottom,

            url("../images/bg-br.png") no-repeat right bottom,

            url("../images/bg-repeat.png") repeat left top;

            /*改变背景图片的position起始点，四朵花都是border边缘处起，而平铺背景是在paddin内边缘起*/

            -webkit-background-origin: border-box, border-box,border-box,border-box,padding-box;

            -moz-background-origin: border-box, border-box,border-box,border-box,padding-box;

            -o-background-origin: border-box, border-box,border-box,border-box,padding-box;

            background-origin: border-box, border-box,border-box,border-box,padding-box;

            /*控制背景图片的显示区域，所有背景图片超边border外边缘都将被剪切掉*/

            -moz-background-clip: border-box;

            -webkit-background-clip: border-box;

            -o-background-clip: border-box;

            background-clip: border-box;

}

整理通过：https://www.w3cplus.com/resources/css3-tutorial-and-case