背景位置：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. Junit参数化测试Spring应用Dubbo接口

    一.创建基础类. package com.tree.autotest; import org.junit.Before;import org.springframework.context.annot ...

  2. RTP Tools

    RTP Tools (Version 1.20) https://wiki.wireshark.org/RTP_statistics Here is a small example: Install ...

  3. java中异常介绍

    一.异常概述 异常处理已经成为衡量一门语言是否成熟的标准之一,目前的主流编程语言如C++.C#.Ruby.Python等,大都提供了异常处理机制.增加了异常处理机制后的程序有更好的容错性,更加健壮. ...

  4. iOS程序发布测试-生成ad hoc证书

    转自: http://blog.sina.com.cn/s/blog_68444e230100srdn.html iOS程序发布测试3-生成ad hoc证书 iOS证书分2种,1种是开发证书,用来给你 ...

  5. ant Table td 溢出隐藏（省略号）

    1.创建组件 components/LineWrap/index.js /** * td 溢出隐藏 组件 */ import React, { PureComponent } from 'react' ...

  6. Android4.4 SystemUI加入Dialog弹窗

    此弹窗为开机SystemUI的显示弹窗: 首先.在SystemUI的源代码文件夹加入源代码类文件,文件夹为frameworks/base/packages/SystemUI/src/com/andro ...

  7. ACE调试中的一个小问题——ace_main_i无法链接

    初学ace没多久,今天遇到了一个小问题. 具体是:我在写完代码之后,编译老是出现一个错误. 提示: ACE_TEST1.obj : error LNK2019: 无法解析的外部符号 "int ...

  8. oracle将一个表中字段的值赋值到另一个表中字段（批量）

    面积表中数据错误,现将面积表中的sfmj字段的值改为居民信息表中匹配字段的值 update (select s.name name1,s2.name name2 from simple s,simpl ...

  9. nginx 配置一个文件下载服务

    cat openvpn.conf server { listen ; server_name localhost; location / { root /home/openvpn/client_fil ...

  10. 转：C#操作摄像头

    转自: http://blog.csdn.NET/chenhongwu666/article/details/40594365 如有雷同,不胜荣幸,若转载,请注明 最近做项目需要操作摄像头,在网上百度 ...