CSS3属性:background-origin详解(设置背景图绘制起始点)

在绘制背景图片时,浏览器默认是从padding区域左上角开始绘制,但是可以利用background-origin属性来指定从border左上角开始绘制或者从content区域左上角开始绘制。

样例代码:

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

样例图片:

background-origin详解

background-origin详解

注:浏览器支持性不做介绍,具体使用时请做具体测试,本人秉着早晚所有浏览器都会支持的态度写此文。