HTML5 背景的显示区域实现


Posted in HTML / CSS onJuly 09, 2020

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 背景显示区域内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木! 

HTML / CSS 相关文章推荐
用css3制作纸张效果(外翻卷角)
Feb 01 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
极简的HTML5模版
Jul 09 HTML / CSS
HTML5实现预览本地图片
Feb 17 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
Dec 20 HTML / CSS
canvas离屏技术与放大镜实现代码示例
Aug 31 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
html5移动端自适应布局的实现
Apr 15 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 HTML / CSS
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 HTML / CSS
HTML5图片层叠的实现示例
Jul 07 #HTML / CSS
HTML5 层的叠加的实现
Jul 07 #HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 #HTML / CSS
html5启动原生APP总结
Jul 03 #HTML / CSS
HTML5开发动态音频图的实现
Jul 02 #HTML / CSS
HTML5公共页面提取作为公用代码的方法
Jun 30 #HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 #HTML / CSS
You might like
php中return的用法实例分析
2015/02/28 PHP
php生成短域名函数
2015/03/23 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
javascript 写类方式之七
2009/07/05 Javascript
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
Vue中计算属性computed的示例解读
2017/07/26 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
python3使用matplotlib绘制散点图
2019/03/19 Python
django和vue实现数据交互的方法
2019/08/21 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
大学生找工作推荐信范文
2013/11/28 职场文书
幼儿园中班新学期寄语
2014/01/18 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
敬老院标语
2014/06/27 职场文书
行政专员岗位职责范本
2014/08/26 职场文书
党员剖析材料范文
2014/09/30 职场文书
补充协议书
2015/01/28 职场文书
2015年安全月活动总结
2015/03/26 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android