HTML5 背景的显示区域实现

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

默认值： &nbs p; border-box
继承性： no
版本： CSS3

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

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

<!DOCTY PE  HT ML >
<html>
<head>
< ;m eta charset="utf-8">
<t IT le>背景的显示区域</title>
<style type="text/css">
div {
 padding:50px;                               /* 设置内 边距 为50px */
 border:50px solid rgba(255, 153, 0, 0.6);   /* 设置边框 宽 度为50px */
 h ei ght:100px;
 width:200px;
 color: # fff;
 font- Size: 24px;
  font-weight :bold;
 text -s hadow:2px 0 1px #f00,
   -2px 0 1px #f00,
   0 2px 1px #f00,
   0 -2px 1px #f00;
 background -i mage:url( .. /images/ br idge. jpg ); /* 设置背景图像 */
 background-position:0 0;                    /* 背景图像起始位为原点 */
 background-repeat:no-repeat;                /* 背景图像不平铺 */
 - webkit -background-ori gin :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 背景显示区域内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是为你收集整理的 HTML5 背景的显示区域实现全部内容，希望文章能够帮你解决 HTML5 背景的显示区域实现所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于HTML5 背景的显示区域实现的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did206025

更新时间：2023-05-03 阅读：18次