有一些网站设计需要使用文本作为背景。这可以通过使用以下方法通过 CSS 轻松实现。
- 在相对定位元素内使用绝对定位元素:在相对定位元素内使用绝对定位元素,绝对元素具有较低的 z-index 值,使文本显示为背景。
例子:
Using text as background with CSS Background TextForeground text
Welcome to GeeksforGeeks
Start Learning
输出:
- 使用 :after 伪元素:使用 :after 伪元素和:after具有较低 z-index 值的伪元素使其显示为背景。在 :after 伪元素中使用文本使文本显示为背景。
例子:
Using text as background with CSS Foreground text
Welcome to GeeksforGeeks
Start Learning
输出:
- 使用 :before 伪元素:使用 :before 伪元素和:before 伪元素具有较低的 z-index 值使其显示为背景。在 :before 伪元素中使用文本使文本显示为背景。
例子:
Using text as background with CSS Foreground text
Welcome to GeeksforGeeks
Start Learning
输出 :