html实现像百度的首页效果一样的背景图（代码）

发布时间：2023-05-17 01:45:48

要实现像百度首页一样的背景图，首先需要找到一张高清的背景图片。可以在图片库等相关网站上下载一张高清的图片，或者使用自己拍摄的照片作为背景图。

接下来，我们需要使用HTML和CSS来实现这个效果。以下是实现的步骤。

步骤一：在HTML页面中添加背景图片

在HTML页面的<body>标签中添加如下代码：

<body style="background-image:url(背景图片路径);">

其中，将“背景图片路径”替换为你自己选择的背景图片路径。

步骤二：设置背景图片的属性

在style标签中添加如下代码：

<style>
    body {
        background-size: cover; /* 使背景图片自适应整个屏幕 */
        background-position: center center; /* 将背景图片设置在页面中间 */
        background-attachment: fixed; /* 固定背景图片不随页面滚动 */
        background-repeat: no-repeat; /* 防止背景图片重复 */
    }
</style>

步骤三：设置页面的内容居中

在style标签中添加如下代码：

<style>
    .container {
        width: 100%; /* 确保容器宽度占满整个页面 */
        max-width: 1200px; /* 设置容器的最大宽度 */
        margin: 0 auto; /* 将容器水平居中 */
        text-align: center; /* 设置容器中的内容居中 */
    }
</style>

步骤四：添加页面内容

在<body>标签中添加页面内容，如以下代码：

<body style="background-image:url(背景图片路径);">
    <div class="container">
        <h1>欢迎来到我的网站</h1>
        <p>这里是我的个人博客，分享一些生活和技术方面的内容。</p>
    </div>
</body>

以上代码将在页面中心添加一个标题和一段文字，这些内容将始终垂直居中在页面中心。

完整的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>我的网站</title>
    <style>
        body {
            background-size: cover; /* 使背景图片自适应整个屏幕 */
            background-position: center center; /* 将背景图片设置在页面中间 */
            background-attachment: fixed; /* 固定背景图片不随页面滚动 */
            background-repeat: no-repeat; /* 防止背景图片重复 */
        }
        .container {
            width: 100%; /* 确保容器宽度占满整个页面 */
            max-width: 1200px; /* 设置容器的最大宽度 */
            margin: 0 auto; /* 将容器水平居中 */
            text-align: center; /* 设置容器中的内容居中 */
        }   
    </style>
</head>
<body style="background-image:url(背景图片路径);">
    <div class="container">
        <h1>欢迎来到我的网站</h1>
        <p>这里是我的个人博客，分享一些生活和技术方面的内容。</p>
    </div>
</body>
</html>

这样，就可以实现像百度首页一样的背景图效果了。