本文這里所說的疊加，就是混合模式中的疊加，也就是說，本文要實現(xiàn)的效果是，文字本身的顏色和紋理進行疊加，而非直接填充紋理。
CSS, SVG和canvas都能實現(xiàn)類似的效果，我們一個一個來看一下。
HTML和CSS代碼如下：
| <h2 class="pattern-overlay"> <span data-text="CSS紋理疊加"></span> CSS紋理疊加</h2>.pattern-overlay { font-size: 60px; font-family: 'microsoft yahei'; background-image: url(./pattern01.jpg); -webkit-text-fill-color: transparent; -webkit-background-clip: text;}.pattern-overlay > span { position: absolute; background-image: linear-gradient(to bottom, #f00, #f00); mix-blend-mode: overlay; -webkit-text-fill-color: transparent; -webkit-background-clip: text;}.pattern-overlay > span::before { content: attr(data-text); } |
就可以實現(xiàn)類似下圖的效果（紅色漸變和灰色石質紋理疊加效果）：
您可以狠狠的點擊這里：CSS實現(xiàn)文本的紋理疊加效果demo
在demo頁面中，我們可以調整漸變圖片的起止顏色，或者更換我們的紋理圖片，都有實時的渲染效果：
實現(xiàn)原理
而在webkit瀏覽器下，可以通過下面CSS組合實現(xiàn)文本以背景顯示效果：
| .fill-bg { -webkit-text-fill-color: transparent; -webkit-background-clip: text;} |
可以用來實現(xiàn)文字漸變，或者類似本站首頁文字流光等效果。
于是，我們使用兩層標簽，分明填充漸變背景和紋理背景，然后再使用CSS3混合模式mix-blend-mode:overly對兩層標簽進行疊加，效果即達成！
兼容性
webkit內核瀏覽器，Chrome，Safari等都支持。
關于為何不使用background-blend-mode說明
新聞熱點
疑難解答
