如何用CSS设置背景图片

作者：朋克周 | 创建时间: 2023-07-04

我们经常会看一些如游戏、电影、购物网上那种五颜六色的网页画面，包括导航菜单，网页主题背景，红的，黑的，(如小简头，像框等)五颜六色的都有，那么我们如何在网页中设置背景图片呢？...

在<body> 标签里面添加一个<div>标签，文字内容为“商品列表”，并嵌入到CSS内部样式，代码如下图：

运行程序，结果如下：

设置<div>的宽度为150px,高度为40px,并为<div>增加背景颜色为红色，在工程文件下面创建一个名为image的文件夹，在其文件插入一张.gif的图片（ url/image/1.gif），并设置边距上下为10px,左右为120px,不平铺(no-repeat)，代码如下图

运行程序，结果如下：

设置字体颜色为白色（white）,粗体；行高（line-height:40px）与<div>的高度一样；内边距：字体离边框15px;代码如下：

运行程序,结果如下：

“px”是像素的意思（例：如这个手机是多少像素，一般指图片的清晰度）

“url”在CSS中是用来插入背景图片

"no-repeat"平铺整个DIV标签