CSS奇思妙想background-clip
时间：2023-03-12 05:29:57
科技观察
说起background-clip，可能很多人都不熟悉。clip是修剪的意思，从字面上看，background-clip就是背景裁剪的意思。我曾经在《从条纹边框的实现谈盒模型》[1]一文中讲到这个属性。感兴趣的可以回头看看。简单来说，background-clip的作用就是设置元素背景（背景图片或颜色）的填充规则。和box-sizing的值很像，一般来说有3个值：{background-clip:border-box;//背景延伸到border的外边缘（但在border之下）background-clip:padding-box;//border下没有背景，即背景延伸到innermargin的外边缘。background-clip:content-box;//背景被裁剪到内容区域（content-box）的外边缘。}不过这些都不是本文的主角。本文的主角是背景剪辑：文字；当然，现在只有chrome支持，所以平时要用，需要-webkit-background-clip:text;。为什么-webkit-background-clip:text使用这个属性的意思是将块内的文本作为裁剪区域向外裁剪，文本的背景就是块的背景，文本以外的区域会被裁剪掉失去。看最简单的Demo，不用-webkit-background-clip:text:
Clip
效果如下：CodePenDemo-Clip[2]使用-webkit-background-clip:text我们对上面的代码稍作修改，加入-webkit-background-clip:text:div{font-size:180px;font-weight:bold;color:deeppink;background:url($img)no-repeatcentercenter;background-size:cover;-webkit-background-clip:text;}效果如下：CodePenDemo-clip[3]看到这里，可能有人会疑惑，这是什么东西，这不就是设置文本的color属性吗。将文字设置为透明色：transparentDon'tworry！当然还有更有意思的地方，因为上面设置了文字的颜色，遮住了div块的背景。如果文本设置为透明怎么办？文本可以设置为透明color:transparent。div{color:transparent;-webkit-background-clip:text;}效果如下：CodePenDemo-clip[4]通过设置文本透明，会出现原来div的背景，并且显示的区域文本认为是所有裁剪是的，这就是-webkit-background-clip:text所做的。起身了解最基本的用法，然后就可以思考如何使用这个元素来做出一些效果了。大大增强了文字的色彩。选择文字颜色的动画效果结合其他元素实现一些其他巧妙的用法来实现文字渐变效果。利用这个属性，我们可以轻松实现文字渐变效果。
background-clip:text
div{字体大小:54px;颜色:透明;背景:线性渐变(45deg,#ffeb3b,#009688,yellowgreen,pink,#03a9f4,#9c27b0,#8bc34a);background-clip:text;animation:huerotate3sinfinite;}@keyframeshuerotate{100%{filter:hue-rotate(360deg);}}CodePenDemo--background-clip:texttextgradient[5];backgroundGradientanimation&&textcropping因为background属性很有用，回想一下我在上一篇文章中巧妙地做了一个背景色渐变动画！[6]我用渐变+动画巧妙的实现了一些背景渐变动画。可以和本文的知识很好的结合起来。结合渐变动画，当然不一定需要过渡动画。这里我使用逐帧动画。通过-webkit-background-clip:text，实现了，嗯，红灯区的感觉：
健康足底按摩 .text{font-size:80px;background:linear-渐变（90deg，red0，orange15%，yellow30%，green45%，teal60%，blue75%，purple90%，purple100%）；背景剪辑：文本；颜色：透明；动画：changeColor.5slinearinfinitealternate；}@keyframeschangeColor{0%{背景图像：线性渐变（90deg，red0，orange15%，yellow30%，green45%，teal60%，blue75%，purple90%，purple100%）;}50%{background-image：线性渐变（90deg，deeppink0,yellowgreen15%,fuchsia30%,lime45%,olive60%,aqua75%,coral90%,brown100%);}100%{background-image:linear-gradient(-90deg,red0,orange15%,yellow30%,green45%,teal60%,blue75%,purple90%,purple100%);}}CodePenDemo--背景渐变动画&&文本裁剪[7]为文本添加高亮动画使用background-clip，我们也可以很方便的为文本添加高亮动画。例如：本质是使用background-clip，伪代码如下：background-clip:text;}p::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;background-image:linear-gradient(120deg,transparent0%,transparent6rem,white11rem,transparent11.15rem,transparent15rem,rgba(255,255,255,0.3)20rem,transparent25rem,transparent27rem,rgba(255,255,255,0.6)32rem,white33rem,rgba(255,255,255,0.3)33.15rem,transparent38rem,transparent40rem,rgba(255,255,255,0.3)45rem,transparent50rem,transparent100%);background-clip:text;background-size:150%100%;background-repeat:no-repeat;animation:shine5sinfinitelinear;}@keyframeshine{0%{background-position:50%0;}100%{background-position:-190%0;}}去掉伪元素的background-clip:text，可以理解原理：CodePenDemo--shineText&&background-clip[8]按钮填充效果利用这个属性，我们可以为按钮实现这样一个遮罩填充动画（主要用来防止文字闪烁）：
Btn .btn{position:relative;color:deeppink;background-color:transparent;border:3pxsoliddeeppink;&::after{content:'';position:absolute;z-index:-1;top:0;left:50%;height:100%;width:0;background-color:deeppink;transition:width.5s,left.5s;}&:hover{color:white;}&:hover::after{top:0;left:0;width:100%;transition:width.5s,left.5s;}}.btn{background-color:deeppink;background-image:linear-gradient(white,white);背景重复：不重复；背景大小：0%100%；背景位置：中心；-webkit-背景剪辑：文本；-webkit-文本填充颜色：透明；过渡：背景大小.5s;&:hover{background-size:100%100%;}}效果如下：CodePenDemo--background-clip:text&&Button填充效果[9]Imagespyingeffect一种用法演示，使用两个div层一起使用，设置相同的背景图片，在父div层设置图片模糊，在子div设置-webkit-background-clip:text，然后使用动画移动子div来窥探图片简单效果图：CodePenDemo--background-clip:textMaskimage[10]综上所述，其实还有很多有趣的用法，只敢想和实践。当然，很多人会抱怨这个属性的兼容性。到现在（2021-07-12），兼容性一直很好，主要是使用时记得加-webkit-前缀：更多精彩CSS技术文章汇总在我的Github--iCSS[11]持续更新中，欢迎点个星订阅收藏。有什么问题或者建议可以多交流。原创文章文笔有限，知识匮乏。如果文章中有任何不准确的地方，请告诉我。参考资料[1]从条纹边框的实现谈盒子模型：http://www.cnblogs.com/coco1s/p/5895764.html[2]CodePenDemo-Clip：https://codepen.io/Chokcoco/pen/WjOBzB[3]CodePen演示-剪辑：https://codepen.io/Chokcoco/pen/eWRaVJ[4]CodePen演示-剪辑：https://codepen.io/Chokcoco/pen/oWwRmE[5]CodePenDemo--background-clip:text文字渐变色：https://codepen.io/Chokcoco/pen/PmjMwz[6]巧做背景色渐变动画！：http://www.cnblogs.com/coco1s/p/6603403.html[7]CodePenDemo——背景渐变动画&&文本剪辑：https://codepen.io/Chokcoco/pen/xdroGp[8]CodePenDemo——闪耀文本&&背景剪辑：https://codepen.io/Chokcoco/pen/xdroGp[8]codepen.io/Chokcoco/pen/OJbEOmb[9]CodePenDemo--background-clip:text&&按钮填充效果：https://codepen.io/Chokcoco/pen/MmoNoq[10]CodePenDemo--background-clip:文本掩码图片：https://codepen.io/Chokcoco/pen/LyNmQv[11]Github——iCSS：https://github.com/chokcoco/iCSS
