背景位置：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. 解决ping 127.0.0.1不通的问题

    用树莓派放在家里当pt下载器,一直挺惬意的,因为没有公网ip用vps和frp配置代理,偶尔ssh上去看看,一段时间也用得好好的. 可是最近这几天,在办公室ssh上去死活连不上. 于是回去后开始折腾,局 ...

  2. 转： android sdk for mac

    转:http://www.cnblogs.com/yjmyzz/p/4219829.html 众所周知的原因,google的很多网站在国内无法访问,苦逼了一堆天朝程序员,下是在mac本上折腾andro ...

  3. poj 2778 AC自己主动机 + 矩阵高速幂

    // poj 2778 AC自己主动机 + 矩阵高速幂 // // 题目链接: // // http://poj.org/problem?id=2778 // // 解题思路: // // 建立AC自 ...

  4. IIS 之 Asp.Net项目内部运行详解

    我们都知道,当用户在浏览器地址栏中输入网址时,该请求会被IIS服务器捕获,如果是请求的是静态页面则由IIS本身处理并直接返回客户端:如果是动态页(*.aspx),通过一系列的前期的处理来到 .NET ...

  5. vue - config(index.js)

    描述:我想,这是调用最多的一个文件了吧(无论是dev,还是prod) 'use strict' // Template version: 1.3.1 // see http://vuejs-templ ...

  6. TensorFlow和深度学习新手教程（TensorFlow and deep learning without a PhD）

    前言 上月导师在组会上交我们用tensorflow写深度学习和卷积神经网络.并把其PPT的參考学习资料给了我们, 这是codelabs上的教程:<TensorFlow and deep lear ...

  7. 算法笔记_063:蓝桥杯练习 送分啦（Java）

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 这题想得分吗?想,请输出“yes”:不想,请输出“no”. 输出格式 输出包括一行,为“yes”或“no”. 2 解决方案 初步一看,这题 ...

  8. mysql 严格模式取消 group by 和 date zore

    取消单个库的时间严格模式 set global sql_mode=(select replace(@@sql_mode,'NO_ZERO_IN_DATE,NO_ZERO_DATE',''));

  9. 关于Future.cancel(mayInterruptIfRunning)方法的参数的问题

    mayInterruptIfRunning设成false话,不允许在线程运行时中断,设成true的话就允许. 可以参考下面的代码来理解,如果设为false的话,会打印到99999,如果设成true的话 ...

  10. 代码自动生成工具 MyGeneration

    MyGeneration 是一款不错的ORM和代码生成工具,它基于模板(Template)工作,安装好MyGeneration 后自带了很多模板,并且提供在线模板库提供模板升级和允许用户自定义模板.M ...