兩個(gè)比較重要的屬性: background-origin與background-clip
background-clip: border-box | padding-box | content-box
默認(rèn)值是border-box
background-clip 定義了背景的繪制區(qū)間(圖片或顏色), 是否延伸到邊框下面缰冤。
background-origin: padding-box | border-box | content-box
默認(rèn)值是padding-box
background-origin 規(guī)定了背景圖片(background-image)的原點(diǎn)位置的背景相對(duì)區(qū)域.
他們共同決定了background的繪圖區(qū)域.
background-origin只對(duì)background-image生效;background-clip對(duì)圖片和背景色均生效
.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
對(duì)于background-image:情況會(huì)更復(fù)雜一些.
.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
這里實(shí)際上background-origin失效了,原因是----origin定義的起始點(diǎn)"超出了"clip定義的繪圖區(qū)域,所以以clip為準(zhǔn)
另一個(gè)例子:
.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
情況又正常了吧~
