-webkit-background-clip:text + -webkit-text-fill-color：仿苹果官网介绍效果 CSS设置文字渐变效果 文字背景图遮罩

[ly2011]

-webkit-background-clip:text + -webkit-text-fill-color：仿苹果官网介绍效果 CSS设置文字渐变效果 文字背景图遮罩

demo:

<style>
.masked-copy *, .masked-copy .inline {
    display: inline;
}
.masked-copy h2 {
    display: block;
    font: inherit;
    color: #fff;
}

.typography-overview-headline-elevated {
    font-size: 64px;
}
.texture-1 {
    background-repeat: no-repeat;
    background-image: url(https://www.apple.com/v/iphone-xr/d/images/overview/copy_texture_1_large.jpg);
}
.masked-copy {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
</style>
<div class="masked-copy texture-1 manifesto typography-overview-headline-elevated">
  <h2 class="inline">来，和 Liquid 视网膜显示屏见个面。</h2>
  <p>iPhone&nbsp;X<span class="small-caps">R</span> 上的这款全新显示屏，是 iPhone 迄今最先进的 LCD
    屏。创新的背光设计，让显示屏一直延伸到了机身边角。因此看上去，整个屏幕都被鲜活生动的色彩铺满。</p>
</div>

效果: