background-clip 与 background-origin 的区别
来源:互联网 发布:linux u盘安装windows 编辑:程序博客网 时间:2024/03/29 14:38
background-clip:background包含的区域,我理解为background的合法显示区域
效果:
babackground-origin:用来决定 background-position 计算的参考位置。在合法区域内,从哪个参考位置开始呢?由这个参数决定。
为了帮助理解background-clip 和background-origin这两个参数,看下面例子:
例子1:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style> div{border:10px solid black;padding:35px;background-image:url('bg_flower.gif');background-repeat:no-repeat;}#div1{background-clip:border-box;backg}#div2{background-clip:content-box;}</style></head><body><p>DIV1</p><p>属性:background-origin:padding-box;//默认值background-clip:border-box;</p><div id="div1">这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。</div><p>DIV2</p><p>属性:background-origin:padding-box;//默认值background-clip:content-box;</p><div id="div2">这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。</div></body></html>效果:
background-clip:决定了backgroud的合法存在区域。
例子2:
<pre name="code" class="html"><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style> div{border:1px solid black;padding:35px;background-image:url('bg_flower.gif');background-repeat:no-repeat;background-position:left;}#div1{background-origin:border-box;background-clip:border-box;backg}#div2{background-origin:content-box;background-clip:border-box;}</style></head><body><p>DIV1</p><p>属性:background-origin:border-box;background-clip:border-box;</p><div id="div1">这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。</div><p>DIV2</p><p>属性:background-origin:content-box;background-clip:border-box;</p><div id="div2">这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。</div></body></html>
效果:
background-origin:决定了在背景合法区域内何位置(这个何位置结合background-position决定)开始布置背景。
例子3:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style> div{border:1px solid black;padding:35px;background-image:url('bg_flower.gif');background-repeat:no-repeat;background-position:left;}#div1{background-origin:border-box;background-clip:content-box;backg}#div2{background-origin:border-box;background-clip:border-box;}</style></head><body><p>DIV1</p><p>属性:background-clip:border-box;</p><div id="div1">这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。</div><p>DIV2</p><p>属性:background-clip:border-box;</p><div id="div2">这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。</div></body></html>
效果:
background-clip:决定了backgroud的合法存在区域。
background-origin:决定了在背景合法区域内何位置开始布置背景。
0 0
- background-clip 与 background-origin 的区别
- HTML/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的用法释疑
- 背景 属性background-origin与background-clip
- CSS: background-clip与background-origin
- css3之background-origin和background-clip的区别与联系
- css3属性中background-clip与background-origin的用法区别?
- CSS3 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的用法释疑
- css3属性中background-clip与background-origin的用法释疑
- css3属性中background-clip与background-origin的用法释疑
- Rightmost Digit
- hdu 2074 叠框
- 二十九、oracle 触发器
- 读书笔记之《图解密码技术》
- B - Little Pony and Sort by Shift
- background-clip 与 background-origin 的区别
- 第一篇 吹點牛逼吧
- hdu 2104 F - hide handkerchief
- Spring入门(1),Spring简介
- 在Ubuntu 14.04 LTS系统中设置Apache虚拟主机
- T-001.数据库练习表
- LeetCode进阶之路(Valid Number)
- codeforces #320 div2A Raising Bacteria
- angularjs2版本创建一个数组,将数组里面的内容通过数据绑定的形式循环到table表单中