您的位置：首页 > Web前端

background-clip 与 background-origin 的区别

2016-09-22 23:31 453 查看
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:决定了在背景合法区域内何位置开始布置背景。

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                background-clip
                                                background-origin
                                                web前端
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航