关于在HTML网页制作中如何添加背景图片

在网页制作中，给页面添加背景图片，可以说是最基础但又最容易出细节的操作之一。很多新手会在路径引用上栽跟头，或者搞不清重复、居中这些属性怎么配合。今天就来聊聊 background-image 这个属性，顺便把几个常见用法理清楚。

效果图：

先看核心语法：background-image:url(图片地址);。这里的 url 可以是网络上的一张图片链接，也可以是本地保存的图片文件。但要注意——如果是本地图片，路径是相对于 CSS 文件的存放位置来写的。最简单的做法是，直接把图片和 CSS 文件放在同一个文件夹里，然后直接写 url(图片名称.jpg) 就行，省心又不容易出错。

放置方法示例：

代码引用：

其他几个常用属性，顺手也提一下：

background-repeat: no-repeat;——背景图片不重复，默认是重复平铺的，加了这个就只显示一张。

background-position: center;——让背景图片居中显示，你也可以改成 top、bottom、left、right，或者用具体的像素值。

background-attachment: fixed;——固定背景图片，页面滚动时背景不动，适合做视觉差效果。