background-clip 苹果官网渐变色字体实现

发表于



自从iPhoneX发布之后,为了宣传这款色彩鲜丽的oled屏幕,苹果官网的字体也变得流光溢彩起来了,看起来确实非常的酷炫

那么如何实现这种效果呢,其实很简单

background-clip

background-clip:设置元素的背景（背景图片或颜色）是否延伸到边框下面。

它有四种属性值,分别是:

  • border-box:背景延伸至边框外沿（但是在边框下层）。
  • padding-box:背景延伸至内边距（padding）外沿。不会绘制到边框处。。
  • content-box:背景被裁剪至内容区（content box）外沿。
  • text:背景被裁剪成文字的前景色。

这里,我们用到的就是text这一属性值,将背景色变为文字的前景色,下面看css代码

1
2
3
4
5
6
7
    h2 {
    background-repeat: no-repeat;
    background-image: url('渐变色图片');
    background-size: cover;
    background-clip: text;
    color: transparent;
}