search

bczFE / articles

📚 百词斩前端写文章的地方
8 stars 1 forks source link

iPhone XR 的镂空文字特效 #4

Open gaoryrt opened 6 years ago

gaoryrt commented 6 years ago

image

关键属性还是 -webkit-background-clip: text

gaoryrt commented 6 years ago

大概是下面这样：

<div class="background-clip">
    <p>lorem ipsum</p>
</div>
.background-clip {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: url(...);
    color: #0000 !important
}

codepen 的 demo