html中如何加入背景图片_IT百科

在html中某个div里加入背景图片的话，主要有以下几种方式：

第一种：在css文件里加入背景图片：在css里用url(../images/背景图2.jpg)，在内联css和引入css中会由于html文件和css文件所处的相世数耐对位置不同，引入图片路径会有所不同。

如图：

第二种：在html中引入：<div class="detail" style="background-image: url(../images/背景图1.jpg)"></div>，同理url()括号里是图片的引入路径。

如图：

第三种：在div中加一张图片

<div class="detail" > 搜春

</div>

如图：

当图片小于背景区域大小时，图片会不断重复显示，如果不想图片重复显示，可以设置background-repeat，background-repeat有4个值，分别是repeat（代表重复显示）、no（代表不重复）、repeat-x（代表水平方向上重复）、repeat-y（代表垂直方向上重复）

当图片小于背景区域大小时，默认从左上角开始铺，如果想从任意位置开始铺，可以使用background-position属性，设置在x、y方向的偏移量。

当图片大于背景区域时，只显示图片左上角毕碧。

当图片和背景区域大小一样大时，显示整张图片。

html图片添加的方法如下：

工具：Dell游匣G15、Windows10、记饥茄闷事本2021。

1、首先在电脑中新建一个烂弯文件夹（如：web-01），在该文件夹里新建一个html文件（如：index1.html）。

2、接着打开这个html文件，编写一个html的基本框架。

3、纳友接着在头部<head>……</head>中加入插入背景图片的代码。不设置平铺方式的情况下是默认水平竖直都平铺。

4、若要不重复平铺，需要写入“background-repeat：no-repeat”此时，图片只显示一次。

5、编写完成之后，保存为html后缀，如下图所示就完成了。

需要准备的材料如返分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件渣塌饥，例如：index.html。

2、将index.html中的<body>标签的代码替换为：

</body>

3、浏览器运行index.html页面，此时发现页面多了背景图片和背景音乐。

欢迎分享，转载请注明来源：内存溢出

html中如何加入背景图片