大家好，我是Coco。本文将讲解如何使用背景系列属性巧妙地实现一些花哨的文字效果。通过这篇文章，你将能够学到：使用background-size和background-position实现炫酷的文字下划线效果使用background-size、background-position和background-clip实现文字逐渐出现的效果写这篇文章的原因文章是这样说的，有一天，我被这样一个标题——10MasterfullyDesignedWebsites[1]所吸引，其中列出了10个极具创意的网站。RedBullRacing[2]网站之一是介绍F1RedBull车队的主页。有这样一个非常有趣的Hover动画效果：这段文字的hover效果看似简单，但实际上仅仅依靠CSS来完全实现它是非常复杂的。比较困难的部分之一是——如何制作效果，逐渐将效果应用于整个文本的部分，而不是将整个效果一次应用于整个文本。利用背景实现文字的下划线效果这时我想起了这篇文章——CSS文字装饰text-decoration&text-emphasis[3]中介绍了一种利用背景来模拟下划线的效果。看个简单的DEMO，使用background模拟文字的下划线效果：
Loremipsumdolorsitametconsecteturadipisicingelit.Mollitianostrumplaceatconsequaturdeseruntvelitducimuspossimuscommoditemporibusdebitisquam,molestiaelaboriosamsitrepellendussedsapientequidemquodaccusantiumvero.
p{??width:600px;font-size:24px;color:#666;}a{background:linear-gradient(90deg,#0cc,#0cc);background-size:100%3px;background-repeat:no-repeat;background-position:100%100%;color:#0cc;}用背景模拟文字下划线效果，效果图如下：或者，用背景模拟虚线下划线：a{background:linear-gradient(90deg,#0cc50%,transparent50%,transparent1px);background-size:10px2px;background-repeat:repeat-x;background-position:100%100%;}CodePenDemo--使用背景模拟下划线和点下划线[4]当然这是最基本的，小聪明利用背景的各种属性，我们实现了各种有趣的效果。巧妙改变background-size和background-position实现文字悬停效果这里，通过巧妙改变background-size和background-position属性，我们可以实现一些非常有趣的文字悬停效果。先看这样一个demo，核心代码作用于被
标签包裹的标签：Loremipsumdolorsitametconsecteturadipisicingelit.Mollitianostrumpplaceatconsequaturdeseruntvelitducimuspossimuscommoditemporibusdebitisquam,molestiaelaboriosamsitrepellendussedsapientequidemquodaccusantium:
gradient0deg(9ff3c41,#fc0,#0ebeff);背景尺寸:03px;背景重复:无重复;背景位置:0100%;过渡:1sall;颜色:#0cc;}a:悬停{背景-尺寸:100%3px;color:#000;}虽然我们设置了background:linear-gradient(90deg,#ff3c41,#fc0,#0ebeff)，但是它默认的background-size:03px开头，也就是看不到下划线一开始。悬停时，更改background-size:100%3px。这时候会出现从03px到100%3px的变换，这是一种从头开始拉伸的效果。看最后的效果：由于设置的background-position为0100%，如果设置的background-position为100%100%，我们可以得到一个相反的效果：//其他不变，只改变background-position，变了从0100%到100%100%a{...background-position:100%100%;...}然后看效果，可以对比上面的动画看看具体的区别在哪里：CodePenDemo--背景下划线动画[5]OK，如果我们用背景实现两条重叠的下划线，再利用上面两个不同的background-position值，就可以得到更有趣的下划线悬停效果。CSS代码显示，背景模拟的两条下划线的background-position的值不同：a{background:linear-gradient(90deg,#0cc,#0cc),linear-gradient(90deg,#ff3c41,#fc0,#8500d8);背景大小:100%3px,03px;背景重复:无重复;背景位置:100%100%,0100%;过渡:0.5sall;颜色:#0cc;}a:hover{background-size:03px,100%3px;color:#000;}可以得到这样的效果，其实每次悬停，都有两条下划线移动：CodePenDemo--backgroundunderlineanimation[6]viabackground-size和background-position配合background-clip实现文字淡入。上述大段用--下划线包围。回到本文开头提到的Gif效果，我们能否在一段文字中实现文字的渐变效果呢？上面的技巧用到了背景，那么背景背景色能不能改变文字的颜色呢？答案是“是”，仅在背景剪辑的帮助下。molestiaelaboriosamsitrepellendussedsapientequidemquodaccusantiumvero。
p{??color:#666;cursor:pointer;}a{background:linear-gradient(90deg,#fc0,#fc0);background-size:0100px;background-repeat:no-repeat;background-位置：0100%；背景剪辑：文本；过渡：。6salllinear;}p:hovera{background-size:100%100%;color:transparent;}看效果，通过background-clip:textmask裁剪，我们将background:linear-gradient(90deg,#fc0,#fc0)给文本赋予背景色，同时使用color:transparent让文本显示背景色的颜色值：CodePenDemo--background-size,background-position和background-clip实现文字的渐变显示[7]当然，稍微变形一下上面的代码，我们可以演化出几种不同的效果。实现整个文本的淡入——从透明到显现。首先是从透明到有色逐渐显现。这里我们只需要保持颜色透明即可（以下效果使用按钮触发效果）：
Button 