bjposition

背景位置：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的更多相关文章

EditPlus轻量级编辑器配置常用的语法规则！
打开EditPlus编辑器:工具 ---- 参数设置 ---- 文件 ---- 设置&语法: 先配置简单的CSS语法: 勾选下面的 “自动完成” ,加载对应的ACP文件,配置一些常用的语法: ...

随机推荐

Codeforces 112A-Petya and Strings（实现）
A. Petya and Strings time limit per test 2 seconds memory limit per test 256 megabytes input standar ...
ckeditor body与P标签去除
项目中使用到了ckeditor ,但在比编辑框的下方多出两个标签,分别是一个 body与P标签,查询代码后发现不是我们自己增加,而是组件自己就有的问题经过查询在使用的js申请处新增 CKEDITO ...
Set 遍历的三种方法
1.迭代遍历:Set<String> set = new HashSet<String>();Iterator<String> it = set.iterator( ...
使用JRadioButton 示例
代码如下: JRadioButton useCache=new JRadioButton("Use cache");// 初始化单选框 useCache.setFont(new F ...
在xcode5下利用Source Control 做 git 项目管理
xcode5做了很大的更新,其中一点非常实用的功能是集成了Source control项目管理,而且和git做了完美的结合:非常实用: 使用: 在新建项目时,选择下面的 Create a git r ...
vc 获取函数名称真实地址
首先写一个很简单的main函数: int main(){ printf("main的地址(?):%08x",main); } 单步调试,可得知 main函数的真实入口地址是:00b ...
SurfaceView绘制录音波形图
本文简单记录由View绘制转为SurfaceView绘制的波形图问题. 上代码: public class VoiceLineView extends View { private final int ...
Android_WebView_全屏
WebView(网络视图)能加载显示网页,能够将其视为一个浏览器. 它使用了WebKit渲染引擎加载显示网页,实现WebView有下面两种不同的方法: 第一种方法的步骤: 1.在要Activity中实 ...
LoadRunner解决超时错误
在运行脚本回放过程中,有时会出现错误,这在实际测试中是不可避免的,毕竟自动录制生成的脚本难免会有问题,需要运行脚本进行验证,把问题都解决后才加入到场景中进行负载测试.下面结合常用的协议(如Web.We ...
ES6常用对象操作整理
const 简单类型数据常量 // const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址不得改动.对于简单类型的数据(数值.字符串.布尔值),值就保存在变量指向的那个内存地址,因 ...

bjposition

bjposition的更多相关文章

随机推荐

热门专题