如何实现网页渐变背景随机化及跨平台文本屏幕居中？

一、随机渐变背景实现 #

1. 移除原有CSS中body的固定background-image声明
2. 定义多组圣诞风格的渐变配色集合，通过JavaScript在页面加载时随机选择一组，动态设置为页面背景

核心代码逻辑：

// 圣诞风渐变配色集合，可自行扩展
const gradients = [
  "linear-gradient(to right, #E63946, #F1FAEE)",
  "linear-gradient(to bottom, #1D3557, #457B9D)",
  "linear-gradient(to right, #A8DADC, #E63946)",
  "linear-gradient(to bottom, #F1FAEE, #1D3557)",
  "linear-gradient(to right, #457B9D, #A8DADC)"
];
// 随机选一组渐变应用到body
document.body.style.backgroundImage = gradients[Math.floor(Math.random() * gradients.length)];

二、跨平台文本屏幕居中 #

放弃固定坐标的绝对定位，使用Flex布局实现自适应居中，适配任意屏幕尺寸和文本长度：

1. 移除原有h1标签内的position:absolute; left:300px; top:300px;行内样式
2. 给html和body添加Flex布局属性，实现内容水平垂直双居中

核心CSS设置：

html, body {
  height: 100%;
  width: 100%;
  margin: 0; /* 清除浏览器默认边距 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

完整整合代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Christmas Gift</title>
    <style>
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Times New Roman', serif;
        }
        h1 {
            margin: 0;
            color: #fff;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3); /* 增强文字可读性 */
        }
        .refresh-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            background: #E63946;
            color: white;
            cursor: pointer;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1 id="a"></h1>
    <button class="refresh-btn" onclick="location.reload();">What else?</button>
    <script>
        // 随机文本列表，可替换为圣诞相关内容
        const textList = [ "Merry Christmas!", "Happy Holidays!", "Warm Wishes!", "Joy to You!", "Season's Greetings!", "Peace & Love!", "Cheers to Christmas!", "Happy New Year!", "Jingle All the Way!", "Ho Ho Ho!" ];
        // 圣诞风渐变配色集合
        const gradients = [
            "linear-gradient(to right, #E63946, #F1FAEE)",
            "linear-gradient(to bottom, #1D3557, #457B9D)",
            "linear-gradient(to right, #A8DADC, #E63946)",
            "linear-gradient(to bottom, #F1FAEE, #1D3557)",
            "linear-gradient(to right, #457B9D, #A8DADC)",
            "linear-gradient(to right, #FFB703, #FB8500)"
        ];
        // 设置随机文本
        document.getElementById("a").innerText = textList[Math.floor(Math.random() * textList.length)];
        // 设置随机渐变背景
        document.body.style.backgroundImage = gradients[Math.floor(Math.random() * gradients.length)];
    </script>
</body>
</html>

补充说明 #

• 渐变配色和文本内容可根据圣诞主题自由调整扩展
• 文字阴影和颜色可根据背景色调微调，提升可读性
• 刷新按钮采用固定定位放置在右下角，避免干扰居中内容展示

内容的提问来源于stack exchange，提问作者Liium