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教程:新增加的结构伪类
Apr 02 HTML / CSS
CSS3结构性伪类选择器九种写法
Apr 18 HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 HTML / CSS
简单介绍CSS3中Media Query的使用
Jul 07 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
Sep 20 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
Aug 18 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
Mar 01 HTML / CSS
HTML5逐步分析实现拖放功能的方法
Sep 30 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 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
人族 TERRAN 概述
2020/03/14 星际争霸
php下实现农历日历的代码
2007/03/07 PHP
php中设置多级目录session的问题
2011/08/08 PHP
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
网页中的图片的处理方法与代码
2009/11/26 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
2015/03/24 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
2016/03/06 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
vue element-ui中table合计指定列求和实例
2020/11/02 Javascript
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
解决Python中回文数和质数的问题
2019/11/24 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
Pandas之缺失数据的实现
2021/01/06 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
中间件的定义
2016/08/09 面试题
军训通讯稿范文
2015/07/18 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
MYSQL如何查看进程和kill进程
2022/03/13 MySQL
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技