0%

css 背景属性

背景剪裁

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

背景起始位置

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

背景缩放

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

固定背景

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

多重背景

1
background: url(bg1.jpg) no-repeat, url(bg2.jpg) no-repeat;
  • 多个背景图用逗号隔开,先写的会压在后写的上面

文本背景裁切

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

模糊属性

1
filter: blur(XXpx);
  • 处于标准流中,模糊属性对之前设置定位的元素有影响