背景位置：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. Java命令学习系列（2）：Jstack

    转载:http://www.importnew.com/18176.html 原文出处: Hollis(@Hollis_Chuang) jstack是java虚拟机自带的一种堆栈跟踪工具. 功能 js ...

  2. Node.js 向一个文件添加内容

    最简方案: fs.appendFile('message.txt', 'data to append', function (err) { }); 参考文档: http://www.codeweblo ...

  3. springMVC 头像裁剪上传并等比压

    第一次写头像裁剪上传,原本想着直接本地预览裁剪再上传,可是时间有限,jquery.jcrop貌似并没有对 假设是ie下图片预览效果是滤镜做的  做出对应处理,也没有时间去改;仅仅好将就一下先把图片上传 ...

  4. windows系统中常用的快捷键

    开发中,一些常用的键盘技巧: (1)快速切换桌面(alt+tab)或者是(window+tab) (2)迅速关闭当前页面 (3)迅速收起所有页面 (4)直接回到桌面页面 (5)锁定你的屏幕

  5. Unity3.5 GameCenter基础教程(转载)

    原地址: http://forum.unity3d.com/threads/116901-Game-Center-Support/page3 using UnityEngine; using Unit ...

  6. 算法笔记_162:算法提高 复数归一化(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 编写函数Normalize,将复数归一化,即若复数为a+bi,归一化结果为a/sqrt(a*a+b*b) + i*b/sqrt(a*a+b*b) . ...

  7. js 数组分解 解构

    // ES5 a = list[0], rest = list.slice(1) // ES6 [a, ...rest] = list

  8. 关于苹果开发证书失效的解决方式(2016年2月14日Failed to locate or generate matching signing assets)

    前言: 从2月14日開始,上传程序的同学可能会遇到提示上传失败的提示. 而且打开自己的钥匙串,发现所有的证书所有都显示此证书签发者无效. Failed to locate or generate ma ...

  9. activeMq发送消息流程

    1,发送消息入口 Message message = messageBean.getMessageCreator().createMessage(session); producer.send(mes ...

  10. vue 基础-->进阶 教程(2): 指令、自定义指令、组件

    第二章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...