兩個比較重要的屬性: background-origin與background-clip
background-clip: border-box | padding-box | content-box
默認值是border-box
background-clip 定義了背景的繪制區(qū)間(圖片或顏色), 是否延伸到邊框下面。
background-origin: padding-box | border-box | content-box
默認值是padding-box
background-origin 規(guī)定了背景圖片(background-image)的原點位置的背景相對區(qū)域.
他們共同決定了background的繪圖區(qū)域.
background-origin只對background-image生效;background-clip對圖片和背景色均生效
.demo {
width: 60px;
height: 60px;
border: 20px dashed #2196f3;
background-color:#9c27b0;
padding: 20px;
}
image.png
下面做一些變更:
.demo {
width: 60px;
height: 60px;
border: 20px dashed #2196f3;
background-color:#9c27b0;
padding: 20px;
background-clip: content-box
}
image.png
對于background-image:情況會更復雜一些.
.demo {
width: 60px;
height: 60px;
border: 20px dashed #2196f3;
background-image:url('http://www.qq1234.org/uploads/allimg/150602/8_150602171754_2.jpg');
background-repeat: no-repeat;
padding: 20px;
background-origin: padding-box;
background-clip: content-box
}
image.png
這里實際上background-origin失效了,原因是----origin定義的起始點"超出了"clip定義的繪圖區(qū)域,所以以clip為準
另一個例子:
.demo {
width: 60px;
height: 60px;
border: 20px dashed #2196f3;
background-image:url('http://www.qq1234.org/uploads/allimg/150602/8_150602171754_2.jpg');
background-repeat: no-repeat;
padding: 20px;
background-origin: content-box;
background-clip: padding-box
}
image.png
情況又正常了吧~
