HTML5 背景的显示区域实现

background-clip 属性规定背景的绘制区域。

默认值：  border-box
继承性：  no
版本：  CSS3

JavaScript 语法：  object.style.backgroundClip=“content-box”
background-clip: border-box|padding-box|content-box;

border-box  背景被裁剪到边框盒。  测试
padding-box  背景被裁剪到内边距框。  测试
content-box  背景被裁剪到内容框。

!DOCTYPE HTML>
    html>
    head>
    meta charset="utf-8">
    tITle>
    背景的显示区域/title>
    style type="text/css">
div {
     padding:50px;
                                   /* 设置内边距为50px */ border:50px solid rgba(255, 153, 0, 0.6);
       /* 设置边框宽度为50px */ height:100px;
     width:200px;
     color:#fff;
     font-Size:24px;
     font-weight:bold;
     text-shadow:2px 0 1px #f00,   -2px 0 1px #f00,   0 2px 1px #f00,   0 -2px 1px #f00;
     background-image:url(../images/bridge.jpg);
     /* 设置背景图像 */ background-position:0 0;
                        /* 背景图像起始位为原点 */ background-repeat:no-repeat;
                    /* 背景图像不平铺 */ -webkit-background-origin:border-box;
           /* 原点从边框开始（webkit） */ -moz-background-origin:border-box;
              /* 原点从边框开始（moz） */ background-origin:border-box;
                   /* 原点从边框开始 */  -webkit-background-clip:border-box;
             /* 背景从边框开始显示（webkit） */ -moz-background-clip:border-box;
                /* 背景从边框开始显示（moz） */ background-clip:border-box;
                 /* 背景从边框开始显示 */}
    /style>
    body>
    div>
    内容从这里开始/div>
    /body>
    /html>
    

到此这篇关于HTML5 背景的显示区域实现的文章就介绍到这了,更多相关HTML5 背景显示区域内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！ 

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！