背景剪裁

background-clip: border-box;        /*从边框开始背景可见，默认*/
                 padding-box;       /*从 padding 开始可见*/
                 content-box;       /*从内容区域开始可见*/

背景起始位置

background-origin: content-box;       /*起始位置位于边框左上，默认*/
                   padding-box;       /*起始位置位于padding左上，默认*/
                   border-box;        /*起始位置位于内容左上*/

背景缩放

background-size: XXpx XXpx;
                 XX%  XX%;
                /*宽度 高度*/
                 cover;           /*根据较长边铺满，会截掉一部分图片 */
                 contain;         /*根据较短边铺满，会有一部分区域留白 */

固定背景

background-attachment: fixed;    /*背景图以浏览器窗口作为参考，元素设置背景图后在固定位置能才看到*/
                       scroll;   /*背景图以盒子左上为参考，随盒子移动*/

多重背景

background: url(bg1.jpg) no-repeat, url(bg2.jpg) no-repeat;

• 多个背景图用逗号隔开，先写的会压在后写的上面

文本背景裁切

background: url(bg.jpg);
-webkit-background-clip: text;
color: transparent;

模糊属性

filter: blur(XXpx);

• 处于标准流中，模糊属性对之前设置定位的元素有影响