文字帶上漸變色,或者說讓文字透出圖片。這些效果 CSS 屬性也能夠完成。 前端
使用 mix-blend-mode 可以輕易實現,咱們只須要構造出黑色文字,白色底色的文字 div ,疊加上圖片,再運用 mix-blend-mode 便可,簡單原理以下:web
核心代碼以下:瀏覽器
<div class="container"> <div class="pic"></div> <div class="text">IMAGE</div> </div> .pic { position: relative; width: 100%; height: 100%; background: url($img); background-repeat: no-repeat; background-size: cover; } .text { position: absolute; width:100%; height:100%; color: #000; mix-blend-mode: lighten; background-color: #fff; } 專門創建的學習Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享學習方法和須要注意的小細節,互相交流學習,不停更新最新的教程和學習技巧(從零基礎開始到WEB前端項目實戰教程,學習工具,全棧開發學習路線以及規劃)
使用了這個屬性的意思是,以區塊內的文字做爲裁剪區域向外裁剪,文字的背景即爲區塊的背景,文字以外的區域都將被裁剪掉。ide
<div class="pic2"> image </div> .pic2{ width: 500px; height: 500px; margin: 40px auto; background: url("1.jpg") no-repeat center center; background-size: cover; font-size: 120px; font-weight: bold; text-align: center; line-height: 500px; /*很重要*/ -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
缺點:只支持webkit內核的瀏覽器,兼容性差。工具