CSS文字视差背景
更新时间：2025-01-09 作者：墨鱼
在网页设计中，使用CSS实现文字视差背景效果可以让文本在滚动时与背景之间产生不同的移动速度，从而创造出一种深度感和层次感。本文通过渐变的背景效果，实现滚动中，文字的视差效果下面是一个简单的实现示例：
HTML结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>某某集团</h1> </body> </html>
CSS样式
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #ccc;
height: 90rem;
line-height: auto;
}
h1{
padding: 50vh 0;
text-align: center;
font-size: 8rem;
background: linear-gradient(to bottom, red 50%, rgb(243, 243, 187) 50%) center / 100vw 100vh fixed;
color: transparent; /* 字体透明 */
background-clip: text; /* 背景裁剪成文本 */
-webkit-background-clip: text; /* WebKit浏览器的支持 */
-webkit-text-stroke: 2px red; /* 文字描边 */
}
</style>说明
padding: 50vh 0;：为元素上下各添加50%的视口高度（vh）的内边距，使其在垂直方向上居中。
text-align: center;：将文本对齐方式设置为居中。
color: #fff;：这是文本颜色的设置，但在后面被覆盖为透明。
font-size: 8rem;：设置字体大小为8rem（相对于根元素的字体大小）。
background: linear-gradient(to bottom, red 50%, rgb(243, 243, 187) 50%) center / 100vw 100vh fixed;：
创建一个线性渐变背景，颜色从红色到浅黄色（rgb(243, 243, 187)），各占50%。
使用 center / 100vw 100vh fixed 定义背景图像的位置、尺寸和固定效果。
color: transparent;：将文本颜色设置为透明，这样背景可以透过文本显示。
background-clip: text;：这个属性使文本区域显示背景，而其他区域保持透明。这是实现文本背景效果的关键。
-webkit-text-stroke: 2px red;：为文本添加一个红色的边框（轮廓），宽度为2px，增强文本的可读性。
效果预览
在浏览器中打开该HTML文件，您应该能看到当您滚动页面时，背景和文本之间产生的视差效果，用于实现一个带有渐变背景和文本轮廓的效果，通常会用于创建一种视觉吸引力的标题或文本内容。
