背景位置：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. 爪哇国新游记之二----用于计算三角形面积的Point类和TAngle类

    这次尝试用两个类完成一个面积计算任务: Point类代表平面上的点: public class Point { private float x; private float y; public Poi ...

  2. zabbix_LAMP源码安装

    Zabbix源码包安装 Cenos5.3 Basic server 安装顺序 Libxml2 Libmcrypt Zlib Libpng Jpeg:需要创建目录jpeg /bin /lib /incl ...

  3. golang 聊天室

    近期看了一些关于golang的资料.发现它的WEBSOCKT实现真起来真的非常easy.以下是代码 go.net/websocket是须要安装的,这个自己装上即可 package main impor ...

  4. ffmpeg对rtmp的基本操作[转]

    ffplay和ffmpeg调用的库是一样的.我刚才试了一下,是可以播的.ffplay "rtmp://tsl.s1979.cutv.com:1935/cutvChannelLive/AxeF ...

  5. js操作当前窗口

      CreateTime--2017年7月21日09:58:34Author:Marydon js操作当前窗口 1.打开一个新的窗口(新的标签页) 实现方式:window.open(url) 实例一: ...

  6. 如何监控MYSQL消耗服务器资源

    http://258xiaolei-sina-com.iteye.com/blog/764665 启动Mysql时加参数--log-slow-queries来记录执行时间超过long_query_ti ...

  7. 微信小程序之下拉刷新，上拉更多列表实现

    代码地址如下:http://www.demodashi.com/demo/11110.html 一.准备工作 首先需要下载小程序开发工具 官方下载地址: https://mp.weixin.qq.co ...

  8. Vue学习小结

    ES6 let完全可以取代var const声明一个只读的常量 箭头函数:可以绑定this对象,大大减少了显式绑定this对象的写法(call.apply.bind) 函数绑定(function bi ...

  9. LaTex的注释

    在LaTex中的注释有以下3种 1.注释一行:使用%注释一行文字, 在%后的文字都不予编译: 2.注释一段:使用\iffalse .... \fi 包含一段文字,被包含的文字被注释掉了: 3.注释一段 ...

  10. newWindow 弹出的新窗口居中显示

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...