background-clip: text 介绍和用法

前言背景

单词clip是 修剪 裁剪 的意思;
大家都知道:　background-clip 属性规定背景的绘制区域。
在W3C标准的它有三个值:　border-box　|　padding-box　|　content-box;
动字面上来理解 分别是 以盒边界来裁剪 | 以内边距为边界来裁剪 | 以内容区域来裁剪

如图:

background-clip.jpg

效果如下:

对比图.jpg

基本概念讲完: 我来回归到 background-clip: text;

从概念上来讲, clip就的值就是 规定 裁剪的范围..

background-clip: text; 顾名思义 就是 以文字的范围来裁剪背景图片.

这就也是 photoshop里的 剪贴蒙版 的概念-->(指定一个固定区域,区域的内容随意更换.)
不过 background-clip: text; 只兼容chrome,要想兼容其他浏览器就要用: -webkit-background-clip: text;

实例:
html

  <div class="clip">clip</div>

css

.clip {
  border: 1px solid red;
  font-size: 200px;
  font-weight: 900;
  width: 400px;
  height: 300px;
  background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1579425247124&di=7087c9b3781116f4440b0c9ec7722d9b&imgtype=0&src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2014%2F0704%2Fe53c868ee9e8e7b28c424b56afe2066d.jpg) center center no-repeat;
  background-size: 100% 100%;

  -webkit-background-clip: text;
  color: transparent; 
}

效果如下:

clip效果.jpg