htmL中怎么插入背景图片？如何设置背景图片大小？_随笔

可以使用html的background-image标签和background-size实现插入背景图片和控制图片大小。

具体步骤如下：

需要准备的材料分别是：电脑、浏览器、ultraedit。

1、在ue编辑器中新建一个空白的html文件。

2、在ue编辑器中输入以下html代码。

3、编辑完成以后，在ue编辑器中点击保存，格式选择UTF8无BOM。

4、在浏览器中打开此html文件，可以看到最终想要实现的背景图片效果。

HTML里面编写背景图片方法基本分三种：

通过标签直接设置<p style="background-image:url(images/a.jpg)">aaaaa</p>

通过CSS设置：select{background-image: url(images/a.jpg)}

通过js修改$(select).css("background-image","url(images/a.jpg)")

扩展资料:

定义和用法：background-image 属性为元素设置背景图像。元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。

详细说明：background-image 属性会在元素的背景中设置一个图像。

根据 background-repeat 属性的值，图像可以无限平铺、沿着某个轴（x 轴或 y 轴）平铺，或者根本不平铺。初始背景图像（原图像）根据 background-position 属性的值放置。

如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。

repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。

参考实例：

参考资料:W3school

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

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

2、其次，在index.html中的<body>标签中，输入css样式代码：style="background-size:100%background: url(image.jpg)"。

3、浏览器运行index.html页面，此时成功插入了背景图片。

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

htmL中怎么插入背景图片？如何设置背景图片大小？