背景位置：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. [Tools] Unlock TypeScript's Features in Vanilla JS with @ts-check and JSDoc

    TypeScript can help you with your plain JavaScript files if you add a simple //@ts-check comment. Th ...

  2. Android传感器的介绍

    在Android2.3 gingerbread系统中,google提供了11种传感器供应用层使用. #define SENSOR_TYPE_ACCELEROMETER       1 //加速度#de ...

  3. U3D实现与iOS交互

    原地址:http://502317120.blog.51cto.com/4062300/1077733 在开发中有很多情况下会用到U3D调用iOS中的函数. 例如在U3D中,我们需要调用到一个iOS ...

  4. Linux 系统目录结构（转）

    登录系统后,在当前命令窗口下输入命令:  ls /  你会看到如下图所示: 树状目录结构: 以下是对这些目录的解释: /bin:bin是Binary的缩写, 这个目录存放着最经常使用的命令. /boo ...

  5. linux下各种形式的shell加法操作总结

    linux 下shell加法操作总结: #!/bin/bash   n=1;echo -n "$n "   let "n = $n + 1" echo -n & ...

  6. excel 的几个函数使用

    =IF(表1[[#此行],[state]]="修改",        IF(                ISBLANK(                    VLOOKUP( ...

  7. 翻翻git之---实现QQ空间点赞部分实现的自己定义控件 EasyLikeArea

    转载请注明出处:王亟亟的大牛之路 昨天在家里弄鱼的事没上班,也就没写东西.决定今天早上补一篇,正好看到了 Easy like area in the circle of friends or QQ q ...

  8. Python基础--字典：当索引不好用时

    当列表或是元组的索引不能达到我们的目的时,我们想到了还有一种序列,即字典. 创建 字典 由多个键以及相应的值构成的键-值对组成. 键唯一.值能够不唯一 phonebook = {'xidada':'1 ...

  9. FreeSWITCH技巧：notify与message-waiting

    FreeSWITCH技巧:notify与message-waiting @(Freeswitch经验点滴) 现象描述 在客户端登陆抓包时,发现了FreeSWITCH发来的包: NOTIFY sip:9 ...

  10. SSH整合简单例子

    说明:简单SSH整合,struts版本2.3.32,spring版本3.2.9,hibernate版本3.6.10 一.开发步骤 1 引jar包,创建用户library.使用的包和之前博文相同,可以参 ...