HTML/CSS: background-clip 与 background-origin的区别
来源:互联网 发布:windows redstone 编辑:程序博客网 时间:2024/03/29 00:31
在CSS2中,背景图片定义的位置是相对于其包含元素的填充(padding)的外部界限的,所有的溢出都会扩展到边框之下。CSS3引入了两个新的属性,可以对其进行更精细的控制。
第一个属性是:background-clip
第二个属性是:background-origin
其对应语法如下:
E { background-clip: keyword;}F { background-origin: keyword;}
对于这两个新属性,其对应的keyword是相同的:border-box, padding-box, content-box。
它们的最根本的区别就是:background-clip 是对背景图片的裁剪,background-origin是对背景图片设置起始点。
对于background-clip, 其关键字是指将背景图片以border的尺寸、以padding的尺寸,以content的尺寸进行切割,其得到的结果是不完整的背景,也就是其中的一部分(原理与截图差不多)。而且有一点要注意,background-clip的切割是对这个容器背景的切割(包括图片与背景颜色)。
对于background-origin,其关键字是指将背景图片放置到border范围内,padding范围内、content范围内,其得到的结果是完整的背景(原理与图片的缩放相似)。与background-clip不同的是,它只是单纯设置背景图片的边界,并不会对背景颜色造成影响。
下面就拿其中一个属性对比一下:
/*Compare: background-clip:content-box background-origin:content-box*/div { width: 400px; height: 400px; border: solid 10px; background-color: black; background-image: url(http://imgsrc.baidu.com/forum/w%3D580/sign=3a30b74051da81cb4ee683c56267d0a4/94ed9ccad1c8a7865e4915ba6709c93d71cf5011.jpg); background-repeat: no-repeat; padding: 100px; background-clip: content-box;}.clip { background-clip:content-box;}.origin { background-origin:content-box;}
初始状态:
background-clip:content-box:
background-origin:content-box:
通过以上三张图片,应该能体会到裁剪与缩放的区别了吧,这也就是两个新属性之间的区别。
如果你想是没那么明白,那我再推荐你看看这篇文章:
【CSS3】background-origin和background-clip的区别
以上内容皆为本人观点,欢迎大家提出批评和指导,我们一起探讨!
- HTML/CSS: background-clip 与 background-origin的区别
- background-clip 与 background-origin 的区别
- CSS: background-clip与background-origin
- background-clip和background-origin的区别
- CSS3中background-clip和background-origin的区别
- css3中background-clip和background-origin的区别
- background-clip和background-origin区别
- background-clip与background-origin的用法释疑
- css中的background的几个属性(background-attachment/background-origin,background-clip等)
- 背景 属性background-origin与background-clip
- css3之background-origin和background-clip的区别与联系
- css3属性中background-clip与background-origin的用法区别?
- CSS3 background-origin,background-clip的比较
- CSS学习(八)-background-origin、background-clip
- 【CSS3】---background-origin background-clip background-size
- Background-clip background-origin 两个属性的水还挺深
- css3属性中background-clip与background-origin的用法释疑
- css3属性中background-clip与background-origin的用法释疑
- ORACLE ERP 的前世今生
- java到底是值传递还是引用传递?
- 【行业特稿】人工智能/虚拟现实/大数据/其他科技创业者
- 关于iOS多线程,你看我就够了
- Android 百度地图定位、添加覆盖物()
- HTML/CSS: background-clip 与 background-origin的区别
- 正则表达式示例
- 去除句子中重复单词(勘重,MAP,SET,迭代器的使用)
- H.264压缩编码算法介绍
- 各种优化方法总结笔记(sgd/momentum/Nesterov/adagrad/adadelta)
- AndroidStudio出现tools:replace="android:icon"问题
- Node.js--简单后台
- 数据库中char, varchar, nvarchar的差异
- 实施浙江鑫源染整有限公司管理系统