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模拟jq点击事件的实例代码
Jul 06 HTML / CSS
CSS3 box-sizing属性
Apr 17 HTML / CSS
一款纯css3实现的响应式导航
Oct 31 HTML / CSS
css实例教程 一款纯css3实现的超炫动画背画特效
Nov 05 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
HTML5移动开发图片压缩上传功能
Nov 09 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 HTML / CSS
详解盒子端CSS动画性能提升
May 24 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 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
[转]JS宝典学习笔记
2007/02/07 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
JS实现方形抽奖效果
2018/08/27 Javascript
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
nodejs文件夹深层复制功能
2019/09/03 NodeJs
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
在Python中使用Neo4j数据库的教程
2015/04/16 Python
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
TensorFlow如何实现反向传播
2018/02/06 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
我的画教学反思
2014/04/28 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
防暑降温通知书
2015/04/27 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL