background-origin屬性使用示例
阿新 • • 發佈:2019-02-12
background-origin用來決定background-position的參考原點,即背景圖片定位的起點。取值有content-box,padding-box,padding-box三種。
content-box:背景影象相對於內容框來定位:
.padding-box{ width: 314px; height: 500px; border: 1px solid rgba(0,0,0,.5); background: orange url(img/k.jpg) no-repeat left top; padding: 20px; margin: 30pxpadding-box:背景影象相對於內邊距來定位:
.padding-box{ width: 314px; height: 500px; border: 1pxborder-box背景影象相對於邊框來定位:
.padding-box{ width: 314px; height: 500px; border: 1px solid rgba(0,0,0,.5); background: orange url(img/k.jpg) no-repeat left top; padding: 20px; margin: 30px; background-origin: border-box; -webkit-background-origin:border-box; -moz-background-origin: border-box; -o-background-origin: border-box; -ms-background-origin: border-box; }當屬性值為border-box時影象是最往左的。