CSS3属性:background-clip详解(设置背景图显示区域)

背景图片默认显示区域包括border、padding、content区域,但是可以改变background-clip值设置显示区域不包括border区域或者只显示content区域。

样例代码:

.box1 {
    background-clip: border-box;  /* 默认 */
 }
 .box2 {
    background-clip: padding-box;
 }
 .box3 {
    background-clip: content-box;
 }

样例图片:

background-clip详解

background-clip详解

此时发现一个问题,设置了background-clip之后只是改变了背景图片显示区域,但是显示区域现实的图片并不是从图片左上角开始绘制的,如果想要让背景图片在显示区域从左上角开始显示则需要配合background-origin属性使用:

样例代码:

.box1 {
    background-clip: border-box;   /* 默认 */
    background-origin: border-box;
 }
 .box2 {
    background-clip: padding-box;
    background-origin: padding-box; /* 默认 */
 }
 .box3 {
    background-clip: content-box;
    background-origin: content-box;
 }

样例图片:

background-clip,background-origin

background-clip,background-origin