HTML 背景图片

在网页设计中，HTML 背景图片（图片）是增强视觉吸引力的重要元素之一。通过合理地使用背景图片，可以显著提升网站的用户体验。本教程将指导您如何在HTML中设置背景图片，并介绍一些常用的CSS属性来控制背景的行为。

上面的实力代码：

<div style="width: 100%;height: 300px; background-image: url(https://www.zhaozhao123.cn/myitems/images/sites1/2024/11/fhmxbbj.jpg);background-position: center;background-repeat: no-repeat;">
    <div style="width:100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center;">
      <h3 style="margin: 0;padding: 0;color: #fff;">HTML 背景图片</h3>
    </div>
</div>

如何设置HTML背景图片

要在HTML文档中设置背景图片，我们通常会使用CSS（层叠样式表）中的background-image属性。此属性可以应用于任何HTML元素，包括整个页面（即<body>标签）。下面是一个基本示例：

body {
    background-image: url('images/background.jpg');
}

在这个例子中，url('images/background.jpg')指定了背景图片的路径。确保路径是正确的，否则图片可能无法加载。

图片的路径可以是相对路径，也可以是绝对路径。

background-image: url(https://www.zhaozhao123.cn/myitems/images/sites1/2024/11/fhmxbbj.jpg);

控制背景图片的重复

默认情况下，背景图片是会在水平和垂直方向上重复的。如果您希望改变这种行为，可以使用background-repeat属性。以下是一些常见的用法：

不重复：

  body {
      background-image: url('images/background.jpg');
      background-repeat: no-repeat;
  }

仅水平或垂直重复：

  body {
      background-image: url('images/background.jpg');
      background-repeat: repeat-x; /* 水平重复 */
  }

  body {
      background-image: url('images/background.jpg');
      background-repeat: repeat-y; /* 垂直重复 */
  }

不做控制背景重复：

我们使用一张仅包含一个西红柿的图片做一个背景图

下面我们使用这张图片做一个不做控制背景重复的背景图片，代码如下：

<div style="width: 100%;height: 332px; background-image: url(https://www.zhaozhao123.cn/myitems/images/sites1/2024/11/h-2.jpg);background-position: center;">
  <div style="width:100%;height: 100%;display: flex;align-items: center;justify-content: center;">
    <h3 style="margin: 0;padding: 1rem;color: #FFFF00;background-color: rgba(0, 0, 0, 0.5);">没有控制背景重复</h3>
  </div>
</div>

运行结果：

没有控制背景重复

固定背景图片

有时候，您可能希望背景图片相对于浏览器窗口保持固定，即使页面滚动也不变。这可以通过background-attachment属性实现：

body {
    background-image: url('images/background.jpg');
    background-attachment: fixed;
}

这个设置使得背景图片不会随着页面的滚动而移动，从而创造出一种视觉上的深度感。

使用背景封面

为了让背景图片适应其容器的大小，您可以使用background-size属性。特别地，cover值可以让图片覆盖整个区域，同时保持图片的比例不变：

body {
    background-image: url('images/background.jpg');
    background-size: cover;
}

使用cover时，图片会被放大或缩小以完全覆盖背景区域，可能会导致部分图片被裁剪。不过，可以很好的用于网站封面页面的封面背景图片。

HTML背景图片示例

结合以上所有技术，我们可以创建一个具有吸引力的网页背景。这里有一个完整的示例，展示了如何设置一个不重复、固定且覆盖整个页面的背景图片：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Example</title>
<style>
    body {
        margin: 0;
        padding: 0;
        background-image: url('images/starry_sky.jpg'); /* 设置背景图片 */
        background-repeat: no-repeat; /* 不重复背景图片 */
        background-attachment: fixed; /* 固定背景图片 */
        background-size: cover; /* 背景图片覆盖整个屏幕 */
    }
</style>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is an example of setting a background image using CSS.</p>
</body>
</html>

通过上述代码，您可以轻松地为您的网站添加一个美观且功能性的背景图片。尝试调整这些属性，看看它们是如何影响最终效果的。希望这篇教程对您有所帮助！