背景位置：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. 【转】Go maps in action

    原文: https://blog.golang.org/go-maps-in-action ------------------------------------------------------ ...

  2. CentOS 6.5 源码安装subversion-1.8.8，附加mod_dav_svn模块

    题记:第一次写如此实践类的博文,都是亲身经历,折腾了大半天,仅记录供参考.(新手实践,有错误之处欢迎纠正.) 安装前准备: 1.已安装JDK1.7,并配置好环境变量. 2.已安装apr.apr-uti ...

  3. select()/poll() 的内核实现

    mark 引用:http://janfan.cn/chinese/2015/01/05/select-poll-impl-inside-the-kernel.html 文章 select()/poll ...

  4. axios put and patch

    window.axios.patch('https://fir-3-test-2332e.firebaseio.com/notes/' + this.$route.params.key + '.jso ...

  5. 如何为iTunes Connect准备应用

    原地址:http://blog.sina.com.cn/s/blog_947c4a9f0101dded.html 如果你已经成功注册了iOS开发者,那么现在就可以登陆iTunes Connect来管理 ...

  6. 如何监控Tomcat服务器

    如何监控Tomcat服务器 发表于:2009-06-25来源:作者:点击数:2651 标签:tomcatTomcat服务器 在进行 性能测试 时,一般都需要对应用服务器进行监控,监控的指标包括应用服务 ...

  7. Drupal的钩子系统

    Drupal的很多功能都是可以定制的.以导航菜单为例,blog模块需要在菜单上添加一些功能,comment模块需要在菜单上添加一些功能,我们开发的自定义模块也需要在菜单上添加一些功能.Drupal开发 ...

  8. Random.org -- 真正的随机数生成器

    接触过程序设计的人一定对随机数不陌生.随机数的用途非常广,比方在測试.分布和统计程序.游戏中. 大多数编程语言也提供了随机数库.能够方便的使用. 只是从严格意义上来讲,这些程序生成的随机数并非真正的随 ...

  9. 用squid配置代理服务器（基于Ubuntu Server 12.04）

    怀揣着为中小企业量身定做一整套开源软件解决方案的梦想开始了一个网站的搭建.http://osssme.org/ 1. 安装squid $sudo apt-get install squid -y 注: ...

  10. ios8 横屏

    iOS8横屏时,状态栏会消失 使用以下代码可以阻止状态栏消失 override func prefersStatusBarHidden() -> Bool { return false }