html 背景区域设置,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  背景被裁剪到内容框。

背景的显示区域

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; /* 背景从边框开始显示 */

}

内容从这里开始

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