css 颜色渐变背景全高

📌 相关文章

📜 css 颜色渐变背景全高 - CSS (1)

📅 最后修改于: 2023-12-03 15:00:09.801000 🧑 作者: Mango

CSS 颜色渐变背景是创建吸引人的背景效果的不错选择。渐变背景可以为你的网站添加深度、纹理和视觉兴趣。下面介绍一种使用 CSS 创建全高渐变背景的方法。

步骤

第一步：创建 HTML 代码

首先，创建一个 HTML 文件，使用以下代码：

<!DOCTYPE html>
<html>

  <head>
    <title>CSS 颜色渐变背景全高</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="gradient-background">
      <h1>Hello World!</h1>
      <p>This is an example of a full-height gradient background using CSS.</p>
    </div>
  </body>

</html>

在这里，我们只是创建一个带有标题和段落的容器 div，以便在 CSS 中添加渐变背景。

第二步：编写 CSS 代码

在 CSS 文件中，使用以下代码来设置全高渐变背景：

body {
  margin: 0;
  padding: 0;
}

.gradient-background {
  background: linear-gradient(to bottom, #f9d5e5, #f39f86);
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h1,
p {
  color: #fff;
  text-align: center;
  margin: 0;
}

这个 CSS 代码会创建一个渐变背景，由上向下渐变，开始颜色为 #f9d5e5，结束颜色为 #f39f86。背景高度为 100vh，可以充满整个页面。此外，我们还创建了一个 flex 容器并将其居中对齐。

第三步：查看效果

在浏览器中打开 HTML 文件，就可以看到一个带有全高渐变背景的容器，其中包含标题和段落。

结论

通过这种方法，你可以在你的网站中创建出漂亮的颜色渐变背景。使用 CSS 渐变背景可以为你的网站添加更多维度和美感。