背景位置：background-origin:content-box;//"border-box", "padding-box", "content-box"
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> #page { width:1024px; height:614px; margin:0 auto; background:url(Images/bg.png) no-repeat; -webkit-transform-style:preserve-3d; -webkit-perspective:2000; } #head { height:104px; line-height:104px; text-align:center; } #head input { margin:0; padding:0 0 2px 0 ;border:none; background:url(Images/btn.png) no-repeat; width:92px; height:32px; font-size:12px; color:#666; text-shadow:1px 1px 1px #fff; } .box { width:583px; height:285px; border-width:9px;-webkit-border-image:url(Images/border_bg.png) 9; background:url(Images/1.png) no-repeat 0 0; padding:17px; margin:0 auto; background-origin:content-box; } #box1 { opacity:0.2; margin-top:-330px; -webkit-transform-origin:bottom; -webkit-transform:rotateX(-180deg); } </style> <script> window.onload = function () { var aInput = document.getElementById("page").getElementsByTagName("input"); var aDiv = document.getElementById("page").getElementsByTagName("div"); var aArr = ["border-box", "padding-box", "content-box"]; for (var i = 0; i < aInput.length; i++) { aInput[i].onclick = function (b) { return function () { toStyle(aArr[b]); } }(i); } function toStyle(val) { for (var i = 1; i < aDiv.length; i++) { aDiv[i].style["backgroundOrigin"] = val; } } } </script> </head> <body> <div id="page"> <div id="head"> <input type="button" value="Border" /> <input type="button" value="Padding" /> <input type="button" value="Content" /> </div> <div id="box" class="box"></div> <div id="box1" class="box"></div> </div> </body> </html>