CSS中的字體填充背景技術可以幫助設計師實現出色的文本效果。例如,如果你想要讓文字在背景上呈現出立體感,可以使用文字填充(text fill)背景技術來完成。
.text-fill-bg { font-size: 72px; font-weight: bold; background: linear-gradient(90deg, #f36161, #20c8eb); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
上面的代碼中,我們為文本創造了彩色背景。具體來說,我們使用了linear-gradient屬性,將兩種顏色垂直地漸變排列。
接下來,我們使用了background-clip(背景-剪裁)屬性,以及webkit-background-clip和-webkit-text-fill-color(這兩個屬性用于Safari瀏覽器)來給文本填充顏色。這個技巧非常巧妙,因為它允許我們在不使用畫布元素的情況下在文本上創造顏色漸變效果。
最后,我們使用了一個提交的不透明度,來讓文本顏色變為透明,讓背景得以通過文字露出,完成了文字填充背景的效果。