background-clip：size属性的研究

最新推荐文章于 2023-02-25 18:14:19 发布

骆天一

最新推荐文章于 2023-02-25 18:14:19 发布

阅读量787

点赞数

分类专栏： css 文章标签： css 技术

本文链接：https://blog.csdn.net/luotianyi1205/article/details/78280084

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

	
background-clip

这是CSS3新出的属性，其中clip 的意思为裁剪其主要是用来确定背景的裁剪区域，换句话说，就是如何控制元素背景的剪裁区域，看一下语法

background-clip ： border-box || padding-box || content-box

取值：

1、border-box:此值为默认值，背景从border区域向外裁剪，也就是超出部分将被裁剪掉；

2、padding-box：背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉；

3、context-box：背景从content区域向外裁剪，超过context区域的背景将被裁剪掉；

我们简单看一下使用代码

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:300px;
height:300px;
padding:50px;
background-color:yellow;
background-clip:content-box;
border:2px solid #92b901;
}
</style>
</head>
<body>

<div>
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>

</body>
</html>

我们看到，在应用

background-clip:content-box;

属性后，大盒子的背景除了文字效果外的都被裁减了，也就是上面用大白话解释的如何控制元素背景的剪裁区域这个新的属性兼容性也不我们想象的要好

真正的大boss来了， background-clip：text（请注意：只有在谷歌下支持，请添加私有属性）

`-webkit-background-clip:text`

这个属性的意思是：以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。

我们看一个不使用background-clip :text 的例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
		div
			  { 
			 margin: auto;
             width: 400px;
              height: 300px;
    line-height: 300px;
    text-align: center;
    font-size: 180px;
    font-weight: bold;
    color: deeppink;
    background: url(img/new.jpg)no-repeat center center;
    background-size: cover;
    
    }
			
			
		</style>
	</head>
	<body>
		  <div>
		  	 clip
		  	
		  </div>
	</body>
</html>

效果：

我们加上-webkit-background-clip:text; 来看下效果

发现盒子的背景区域被裁减了，光剩下了文字的背景

这里我有一个疑问，文字属于盒子，盒子的背景是图片，那么文字的背景不应该是图片吗，而照此说法，文字的背景不属于盒子的背景

我的理解就是把背景裁剪到文字，又因为文字有颜色，所以显示背景白色

这不就是文字color的属性吗，我们来看一个厉害的，如果我把文字的颜色设置为transparent呢代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
		div
			  { 
			 margin: auto;
             width: 400px;
              height: 300px;
    line-height: 300px;
    text-align: center;
    font-size: 180px;
    font-weight: bold;
    color:transparent;
    background: url(img/new.jpg)no-repeat center center;
    background-size: cover;
    -webkit-background-clip: text;
    
    }
			
			
		</style>
	</head>
	<body>
		  <div>
		  	 clip
		  	
		  </div>
	</body>
</html>

那么根据这种方法我们是不是可以做渐变文字了，

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			div {
				margin: auto;
				width: 400px;
				height: 300px;
				line-height: 300px;
				text-align: center;
				font-size: 180px;
				font-weight: bold;
				color: transparent;
				background: linear-gradient(90deg, #ffc700 0%, #e91e1e 50%, #6f27b0 100%);
				background-size: 200% 100%;
				background-position: 0 0;
				animation: bgposition 2s infinite linear alternate;
			}
			
			@keyframes bgposition {
				0% {
					background-position: 0 0;
				}
				100% {
					background-position: 100% 0;
				}
			}
		</style>
	</head>

	<body>
		<div>
			clip

		</div>
	</body>

</html>