【CSS3】background-origin和background-clip的区别
background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性,它们有相同的可选值,即border、padding、content三种,而且这两个属性表示的都是元素背景与元素边框、补白(padding)和内容区域之间的某种关系。
虽然两者看上去实现的效果差不多,但是他们两个的原理是不同的。background-origin定义的是背景位置(background-position)的起始点;而background-clip是对背景(图片和背景色)的切割。
1.background-origin
我们来看一下例子:
我们来看一下style样式:
.bg{width: 100px;height: 100px;padding:50px;border: 10px dashed #000000;background: #ffff00 url('pic1.gif') no-repeat;margin-top: 10px;display: inline-block;}.bg_origin_border{background-origin: border-box;/*background-position: 10px 10px;*/}.bg_origin_padding{background-origin: padding-box;/*background-position: 10px 10px;*/}.bg_origin_content{background-origin: content-box;/*background-position: 10px 10px;*/}
下面我们把注释打开,来进一步验证backgroung-origin。
2.backgroung-clip
我们还是直接来看例子:
样式:
.bg_clip_border{background-clip: border-box;/*background-position: -10px -10px;*/}.bg_clip_content{background-clip: content-box;/*background-position: -10px -10px;*/}.bg_clip_padding{background-clip: padding-box;/*background-position: -10px -10px;*/}
我们接着把注释去掉:
这就印证了background-clip只是将背景和背景色粗暴的裁剪。
转载于:https://www.cnblogs.com/shytong/p/5077129.html
【CSS3】background-origin和background-clip的区别相关推荐
- css3-background clip 和background origin
1.background-origin background-origin 里面有3个参数 : border-box | padding-box | content-box; border-box,p ...
- CSS3详解:background
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...
- CSS3 之 less、sass、stylus区别
CSS(Cascading Style Sheet)被译为级联样式表,做为一名前端从业人员来说,这个专业名词并不陌生,在行业中通常称之为"风格样式表(Style Sheet)",它 ...
- html隐藏元素的方式,Web前端:CSS3——3种隐藏元素方法的区别
原标题:Web前端:CSS3--3种隐藏元素方法的区别 Web前端教程 CSS3规范的一个新特点是被分为若干个相互独立的模块.一方面分成若干较小的模块较利于规范及时更新和发布,及时调整模块的内容,这些 ...
- iOS 后台运行 Background Task与Background Mode
1. background Task的使用 1) Background Task仅用于执行短时间的任务,APP切换到后台后,可以通过beginBackgroundTaskWithExpirationH ...
- background与background-color 你“不知道”的区别
background与background-color的区别 有时候你是不是会有疑问,当你在ul >li>a中把a设置成了display:block 开始时用background设置了背景 ...
- html里background颜色属性,background属性值
js怎么获取css样式里的background属性值呢? ss文件中如何得到某个属性值: 一.getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值, 返回的是一个CSS样式 ...
- CSS3中word-break和word-wrap有什么区别?
大家都知道在CSS3中增加了很多新的属性,其中word-break和word-wrap就是用来给文本换行使用的,但是两者有什么区别很多小伙伴都不是很清楚.今天小千就来告诉你他们究竟有什么不同,应该用在 ...
- html5中background什么意思,background
background (计算机专业术语) 语音 编辑 锁定 讨论 上传视频 本词条缺少概述图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! background 简写属性在一个声明中设置所有 ...
- android background大全,Background安卓版-Background壁纸预约 _5577安卓网
Background是一款全新的手机壁纸应用,软件运行在安卓平台,软件包含了丰富的高质量的手机壁纸应用,是少数派推荐的适合安卓手机的壁纸应用,那么想让自己手机更酷炫的用户使用体验吧! 温馨提示 应用还 ...
最新文章
- xshell连接Linux、ngix部署
- 【数学建模】【APIO2015】Palembang Bridges
- ​一网打尽 Linux 必备技能,就靠它了!
- 【DP】砝码称重 (ssl 1072)
- Spring Boot中对log4j进行多环境不同日志级别的控制
- 如何通过VC的 CHttpFile 抓取网页内容
- 三角形已知边长求高公式_五年级数学:“长方形、正方形、三角形、平行四边形、梯形” 知识重点、难点全解析,附习题!...
- python发邮件和网络的简单使用
- splice slice
- pandas.read_csv() 详解与如何合适的读取行序号与列名
- MySQL使用注意事项(一)
- 使用dll查看器dll文件中的内容
- Android一键加群实现
- 上 k8s 生产环境的一些准备!
- 基于u3d_FPS_Demo
- Java经典入门教程!java工程师的进阶之路
- @2021届毕业,各种招聘平台大集合!
- 加密的rar文件不知道密码怎么解压
- 作为程序员,有没有让你感到既无语又崩溃的程序命名?
- 写给新手的公众号写作经验帖
热门文章
- Cocos2d 之FlyBird开发---GameData类
- 杭电2055 另一种
- 一年成为emacs高手
- 新一代(New Generation)测试框架TestNG
- 来自法国的山寨苹果系统——梨子系统PearOS,精美仿苹果风格的免费Linux操作系统(颇有iOS和OSX的神...
- OpenCV中CV_IS_MAT_CONT(src->type dst->type) 的含义
- C++中sizeof问题
- python中对象和变量的关系_浅析python中的类变量和对象变量
- python turtle什么意思_Python turtle shape和
- 关于纯cs3动画的五个原创实例分享