html怎么用图片做背景

在HTML中，我们可以使用<img>标签来插入图片，这个标签有很多属性，可以帮助我们更好地控制图片的显示效果。

1、src属性

src属性用于指定图片的URL，这个URL可以是相对路径，也可以是绝对路径，如果我们的图片文件名为"example.jpg"，并且它位于与我们的HTML文件相同的目录中，那么我们可以这样写：

```html

<img src="example.jpg">

```

如果我们的图片位于网络上，我们可以使用图片的URL。

```html

<img src="https://www.example.com/images/example.jpg">

```

2、alt属性

alt属性用于提供图片的描述，如果由于某种原因（例如网络问题或浏览器设置）图片无法显示，那么浏览器将显示alt属性中的文本，对于使用屏幕阅读器的视觉障碍用户，alt属性也是非常重要的，因为它可以描述图片的内容。

```html

<img src="example.jpg" alt="示例图片">

```

3、width和height属性

width和height属性用于指定图片的宽度和高度，这两个属性的值可以是像素值，也可以是百分比，如果我们想让图片的宽度为500像素，高度为300像素，我们可以这样写：

```html

<img src="example.jpg" width="500" height="300">

```

4、title属性

title属性提供了一种方式来提供关于元素的额外信息，当用户将鼠标悬停在图片上时，这些信息会显示出来。

```html

<img src="example.jpg" title="这是一张示例图片">

```

5、border属性

border属性用于指定图片周围的边框的宽度，如果我们想要一个宽度为1像素的边框，我们可以这样写：

```html

<img src="example.jpg" border="1">

```

6、align属性

align属性用于指定图片的对齐方式，它可以取的值有"left"、"right"和"middle"，如果我们想要图片右对齐，我们可以这样写：

```html

<img src="example.jpg" align="right">

```

7、vspace和hspace属性

vspace和hspace属性用于指定图片周围空间的大小。vspace属性指定上下空间的大小，hspace属性指定左右空间的大小，这两个属性的值都是像素值，如果我们想要在图片上下有10像素的空间，在图片左右有20像素的空间，我们可以这样写：

```html

<img src="example.jpg" vspace="10" hspace="20">

```

相关问题与解答：

Q1: 如果我想要图片居中显示，应该怎么做？

A1: 你可以使用CSS来实现图片的居中显示，你可以将图片包裹在一个<div>元素中，然后使用CSS的text-align: center;属性来使图片居中，代码如下：

```html

<div style="text-align: center;">

<img src="example.jpg">

</div>

```

Q2: 我可以在<img>标签中使用HTML实体吗？

A2: 是的，你可以在<img>标签中使用HTML实体，你可以使用<和>来代替小于号和大于号，这对于防止跨站脚本攻击（XSS）是有帮助的，代码如下：

```html

<img src="example.jpg" alt="&lt;示例图片&gt;">

```