標籤：linear mon title back hit tail label 技術 author
4.2 CSS3 背景原點屬性
4.2.1 background-origin 屬性的文法及參數background-origin屬性主要就是用來決定 background-position屬性的參考原點，即決定背景圖片定位的起點。在預設情況下，背景圖片的background-position屬性總是以元素左上方的座標原點對背景圖片進行背景定位。CSS3的background-origin屬性將打破這一格局，可以根據自己的需要來改變背景圖片的background-position起始位置。
文法：
background-origin: padding || border || content //早期文法background-origin: padding-box || border-box || content-box //新文法IE9+ / firefox4+ / chrome4+ / safari3+ / opera10.5+ 均支援新的文法
取值說明：
1、padding-box(padding):此值為background-origin的預設值，決定background-position起始位置從padding的外邊緣（border的內邊緣）開始顯示背景圖片；
2、border-box(border):此值決定background-position起始位置從border的外邊緣開始顯示背景圖片；
3、content-box(content):此值決定background-position起始位置從content的外邊緣（padding的內邊緣）開始顯示背景圖片；
有一點需要提出，在ＩＥ8以下版本解析是不一樣的，在IE7以下版本background-origin預設是從border開始顯示背景圖片。
4.2.2 background-origin屬性使用方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>background-origin 使用方法</title> <style> div{ width: 300px; height: 200px; border: 20px dashed rgba(0, 0, 0, 0.3); background: orange url(http://7xr9pe.com1.z0.glb.clouddn.com/logo100.jpg) no-repeat left top; padding: 20px; margin: 30px; } </style></head><body> <div class="padding-box"></div></body></html>1、padding-box
.padding-box{ background-origin: padding-box;}2、border-box
.border-box{ background-origin: border-box;}3、content-box
.content-box{ background-origin: content-box;}
《圖解CSS3——第4章 CSS3背景-2》
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
