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