html渐变色背景代码

作者：诸神之翼发布日期:2025-09-28 浏览:92

<!DOCTYPE html>
<html>
<head>
    <title>渐变色背景示例</title>
    <style>
        body {
            /* 线性渐变，从顶部到底部 */
            background: linear-gradient(to bottom, #ff7e5f, #feb47b);
            /* 设置高度为100%视窗高度 */
            height: 100vh;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <h1>欢迎来到渐变色背景页面</h1>
</body>
</html>

解释说明：

linear-gradient(to bottom, #ff7e5f, #feb47b)：定义了一个从顶部到底部的线性渐变背景。颜色从#ff7e5f（一种橙红色）过渡到#feb47b（一种浅橙色）。
height: 100vh;：设置页面的高度为100%的视窗高度，确保背景色覆盖整个页面。
display: flex; justify-content: center; align-items: center;：使页面中的文本居中显示。

希望这个示例能帮助你理解如何在HTML页面中使用渐变色背景。

上一篇：html table border

下一篇：html 自动换行