首页web打出一个带有全屏照片背景并带有炫彩文字的代码

web打出一个带有全屏照片背景并带有炫彩文字的代码

时间: 2024-02-13 12:06:22 浏览: 27

以下是一个简单的实现方式： ```html <!DOCTYPE html> <html> <head> <title>全屏照片背景和炫彩文字</title> <style> body { margin: 0; padding: 0; overflow: hidden; } #bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: -1; } #text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 5em; color: #fff; background: -webkit-linear-gradient(45deg, #f00, #0f0, #00f); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } </style> </head> <body> <img id="bg" src="https://picsum.photos/1920/1080"> <div id="text">Hello World!</div> </body> </html> ``` 这个代码实现了以下功能： - 在全屏显示一张随机的照片作为背景。 - 在页面中心显示一段炫彩的文字。 - 背景图片会自适应屏幕大小，保证全屏展示。 - 炫彩文字使用了 CSS 的渐变和文字填充技术，保证了兼容性和美观性。