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

bjposition的更多相关文章

  1. EditPlus轻量级编辑器配置常用的语法规则！

    打开EditPlus编辑器:工具 ---- 参数设置 ---- 文件 ---- 设置&语法: 先配置简单的CSS语法: 勾选下面的 “自动完成” ,加载对应的ACP文件,配置一些常用的语法: ...

随机推荐

  1. ubuntu创建sudo 用户

    The sudo command provides a mechanism for granting administrator privileges, ordinarily only availab ...

  2. [AngularJS] $interval

    $interval provides an excellent service for timed operations in your AngularJS apps. It has the adva ...

  3. VC在windows中打开文件夹并选中文件

    网上一位前辈高人的一段精髓代码让我眼前一亮…… ShellExecute(NULL, "open", "explorer.exe", "/select ...

  4. 图片转成base64, base64转成图片

    1.我们在看代码时经常在img或css背景图片中看到: src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgA ...

  5. C++14系列（1）:Linux下C++14开发环境配置

    g++安装 參考地址: http://sysads.co.uk/2014/07/install-gcc-gnu-4-9-1-on-ubuntu-14-04/ 当前Ubuntu的LTS版本号为14.04 ...

  6. php中对象是引用类型吗？

    这貌似是一个极其简单的问题,还用得着专门写一篇博文?各位看官,最初我也这么认为,但这的确蒙蔽了你那水灵灵的小眼睛,不妨看看什么是引用? $a = 10; $b = &$a; $b = 20; ...

  7. adb 修改手机代理方式

    一.使用全局命令 设置代理: adb shell settings put global http_proxy 代理IP地址:端口号 如: adb shell settings put global ...

  8. Android数据格式解析对象JSON用法

    1.JSON概念: 一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性,从而可以在不同平台间进行数据交换.JSON采用兼容性很高的文本格式,同时也具备类似于C语言体系的行为. JSON可以将 ...

  9. MySQL主从（MySQL proxy Lua读写分离设置，一主多从同步配置，分库分表方案）

    Mysql Proxy Lua读写分离设置 一.读写分离说明 读写分离(Read/Write Splitting),基本的原理是让主数据库处理事务性增.改.删操作(INSERT.UPDATE.DELE ...

  10. A Translation for Quaternion 一篇对四元数的翻译

    一篇写的非常好的博客:http://www.cnblogs.com/lookof/archive/2012/02/24/2360749.html