背景位置：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. Elasticsearch的javaAPI之query dsl-queries

    Elasticsearch的javaAPI之query dsl-queries 和rest query dsl一样,elasticsearch提供了一个完整的Java query dsl. 查询建造者 ...

  2. linux中升级jdk的方法

    先查看java的安装情况: # rpm -qa|grep java 卸载: rpm -e --nodeps ******* 然后再安装就可以了

  3. Android 8.0新特性-取消大部分静态注册广播

    今天楼主在写一个广播的demo,功能非常的简单,就是一个应用发送一个自定义的广播,同时在这个应用里面定义了一个广播接受者,并且在AndroidManifest文件中进行静态的注册.Demo看上去非常的 ...

  4. iOS工程中的info.plist文件的完整研究

    原地址:http://blog.sina.com.cn/s/blog_947c4a9f0100zf41.html 们建立一个工程后,会在Supporting files下面看到一个"工程名- ...

  5. 为什么要用 SpringMVC 的 SessionStatus

    我们可以在需要访问 Session 属性的 controller 上加上 @SessionAttributes,然后在 action 需要的 User 参数上加上 @ModelAttribute,并保 ...

  6. C#实现播放声音的方法

    文章来自学IT网:http://www.xueit.com/html/2009-09/21_4598_00.html 在这里介绍使用C#实现播放声音的几种方法,都是利用组件等方法来实现的,有兴趣的话可 ...

  7. IDEA部署Tomcat应用所有接口中文乱码

    解决问题的思路: 1.分析比对http请求头,contentType等设置 2.前段编码,后端解码,这个方式比较落麻烦,凡是有中文乱码的地方都要进行解决 3.修改Tomcat的默认编码,tomcat8 ...

  8. C语言初级链表（之有头节点的单向链表）

    #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> typedef struct No ...

  9. Android---Handler消息处理机制

    搞Android的人都知道.android是不同意你在子线程中更新UI操作的.这主要出于线程安全方面的考虑.通常的做法是在主线程中创建一个Handler对象,在子线程中创建一个Message对象.该M ...

  10. 解决gremlin-dirver访问tinkerpop服务器提示序列化错误

    解决gremlin-dirver访问tinkerpop服务器提示序列化错误 问题描述 程序集成了gremlin-driver,访问远程tinkerpop服务器,在执行创建节点操作时,返回如下错误栈: ...