background-clip 与 background-origin 的区别_background-clip和 background- origin的区别是什么?

作者：小小林熬夜学编程 | 2024-05-18 22:55:37

踩

background-clip和 background- origin的区别是什么?

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:决定了在背景合法区域内何位置开始布置背景。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/590273