html文档中怎么把图片作为背景？-猿码集

1.背景图简介

背景图（background-image）是指用作页面背景的图片，该图片可以是纯色，也可以是复杂图案。背景图可以为页面增加美感和可读性。

在 HTML 中，我们可以使用 CSS 技术来设置背景图，使其不仅能够显示在所有的设备上，而且能够适应不同的屏幕尺寸。背景图能够帮助设计人员创建出独具特色的网站界面和页面。

可以在 CSS 中通过为指定标签添加背景图片来设置背景图。例如，下面的代码将一个包含 "HELLO WORLD!" 的 div 标签设置为背景图片。


<div style="background-image: url('image.jpg');" >HELLO WORLD!</div>

在CSS 中，我们使用以下的语法来为标签添加背景图：

选择器 {
  background-image: url(图片URL);
}

其中，选择器是指要添加背景图的标签的名称，例如 div、body 等；图片 URL 是指指定图片的网址。我们可以使用以下方式指定不同类型的图片：

1）使用相对路径指向本地图片

相对路径是指相对于当前文件的路径。因此，如果要在 HTML 文件中使用本地图片，则应该使用相对路径指向图片。例如，下面的代码会将 index.html 文件所在目录下的 image.jpg 图片作为背景：

div {
    background-image: url("image.jpg");
}

2）使用绝对路径指向本地图片

绝对路径是指相对于网站根目录的路径。因此，如果要在 HTML 文件中使用网站根目录下的图片，则应该使用绝对路径指向图片。例如，下面的代码将网站根目录下的 images 目录中的image.jpg 图片作为背景。

div {
    background-image: url("/images/image.jpg");
}

3）使用 URL 指向远程图片

我们还可以使用 URL（Uniform Resource Locator，统一资源定位器）来指定远程图片的路径。例如，下面的代码将来自 http://example.com/image.jpg 的远程图片作为背景。

div {
    background-image: url("http://example.com/image.jpg");
}

我们可以通过在样式文件中设置背景图片，来为整个网站或某个页面的所有元素设置相同背景图片。为此，我们可以创建一个名为样式.css 的样式文件，并在其中添加以下CSS 代码：

body {
    background-image: url("image.jpg");
}

其中，”body”标签表示整个页面，它将背景图设置为了 image.jpg。

当然，为了确保背景图能够呈现出理想的效果，我们应该在制作背景图时，尽可能使用高质量的图片，并且设置背景图的属性。以下是常用的背景图属性：

使用 background-repeat 属性，可以控制背景图是否要被平铺重复。例如，将 background-repeat 属性设置为 no-repeat，可以防止背景图片的出现使用这种样式，即使页面内容开始滚动或调整大小。

body {
    background-image: url("image.jpg");
    background-repeat: no-repeat;
}

通过设置 background-size 属性，可以调整背景图的大小。例如，值为 cover 可以使背景图自动缩放成与页面大小相同的大小。而“contain”值则会将图像适当地缩放，以让它符合元素的大小的同时尽可能小(保持图片的原有比例)：

body {
    background-image: url("image.jpg");
    background-size: cover;
}

通过在背景图属性中使用 background-position 属性，可以指定图像相对于其容器的位置。例如，“top left”将使图像从其容器的左上角开始显示，而“center center”则将图像居中显示：

body {
    background-image: url("image.jpg");
    background-position: top left;
}

通过使用 CSS，我们可以很容易地将图像添加到网页中，并将其设置为背景。这样，能够为网页添加更多的美感和可读性。

我们可以通过使用 background-repeat、background-size 和 background-position 等属性来进一步优化背景图的效果。

最后，当使用背景图时，请确保图片具有高质量，并且应该尝试在不同的屏幕尺寸上测试。