bjposition

转载于 2013-06-25 09:30:00 发布 · 51 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/aimyfly/p/3154086.html

背景位置：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>