background-clip: text 介绍和用法

最新推荐文章于 2025-10-06 07:12:14 发布

原创最新推荐文章于 2025-10-06 07:12:14 发布 · 1.4k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #css

本文介绍了background-clip属性，其在W3C标准中有border-box、padding-box、content-box三个值。重点讲解了background-clip: text，它是以文字范围裁剪背景图片，类似Photoshop的剪贴蒙版概念，且该属性仅Chrome兼容，兼容其他浏览器需用-webkit-background-clip: text。

前言背景

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

如图:

效果如下:

基本概念讲完: 我来回归到 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; 
}

效果如下: