网页背景如何修改？背景色和背景图片怎么添加？-html教程-PHP中文网

网页背景如何修改？背景色和背景图片怎么添加？

月夜之吻

发布： 2025-08-11 13:06:02

原创

909人浏览过

改网页背景的核心是使用css的background-color和background-image。1. 设置纯色背景用background-color，支持颜色名、十六进制、rgb或rgba（可加透明度）；2. 设置图片背景用background-image: url('路径')，需注意路径正确；3. 防止图片重复用background-repeat: no-repeat；4. 使图片居中显示用background-position: center center；5. 让图片完全覆盖元素且保持比例用background-size: cover；6. 若需图片随页面滚动而非固定，用background-attachment: scroll（默认值），固定则用fixed；7. 可通过background缩写属性合并设置，顺序一般为image repeat position/size attachment color；8. 背景图片会覆盖背景色，但图片透明或未铺满时背景色会显现，因此设置背景色可作为图片加载失败的备用方案；9. 支持多背景图，用逗号分隔多个url()，图层顺序从上到下，对应其他背景属性也需用逗号分隔对齐。综上，只需合理组合这些css属性即可实现美观稳定的网页背景效果。

网页背景如何修改？背景色和背景图片怎么添加？

想改网页背景？核心其实就俩：CSS 的

background-color

登录后复制

管纯色，

background-image

登录后复制

搞定图片。就这么简单，但能玩出的花样可不少，而且处理不好，页面可能会显得有点乱。

解决方案

说起来，改背景这事儿，核心就是 CSS。你得找到对应的 HTML 元素，比如

<body>

登录后复制

标签，或者某个

<div>

登录后复制

，然后给它加上样式。

最直接的，背景色：

background-color

登录后复制

。你可以用颜色名，像

red

登录后复制

、

blue

登录后复制

；也可以用十六进制代码，

#FF0000

登录后复制

(红)；或者 RGB 值，

rgb(255, 0, 0)

登录后复制

。我个人是觉得十六进制最常用，也最方便复制粘贴。透明度呢？用

rgba(255, 0, 0, 0.5)

登录后复制

，最后一个

0.5

登录后复制

就是透明度，0 是全透明，1 是完全不透明。这在做一些叠加效果时特别好用，比如给内容区域加个半透明背景，让下面的图片若隐若现。

然后是背景图片：

background-image

登录后复制

。这玩意儿得用

url()

登录后复制

包住你的图片路径。比如

background-image: url('images/bg.jpg');

登录后复制

。路径写对是关键，相对路径、绝对路径，这块儿稍微有点儿坑，路径不对图片就出不来。我见过不少人因为路径问题卡半天。

光有图片还不够，还得考虑它怎么铺。

background-repeat

登录后复制

：默认是

repeat

登录后复制

，图片会平铺满整个区域。不想平铺？

no-repeat

登录后复制

。只想横向平铺？

repeat-x

登录后复制

。竖向？

repeat-y

登录后复制

。

background-position

登录后复制

：控制图片位置。

center center

登录后复制

居中，

top left

登录后复制

左上角。也可以用百分比或者像素值。

background-size

登录后复制

：这个特别重要。

auto

登录后复制

是默认大小。

cover

登录后复制

会把图片放大或缩小，直到完全覆盖元素，可能会裁切掉一部分。

contain

登录后复制

则是让图片完整显示在元素内，可能会留白。我个人更喜欢

cover

登录后复制

，通常效果更震撼，也省心。

background-attachment

登录后复制

：图片是随着页面滚动还是固定不动？

scroll

登录后复制

是默认，跟着滚；

fixed

登录后复制

则是固定在视口，页面滚动它也不动，做一些视差效果时常用，尤其在全屏背景图上效果很棒。

当然，你也可以用一个

background

登录后复制

缩写属性，把上面这些都写在一起，比如：

background: url('images/bg.jpg') no-repeat center center / cover fixed #f0f0f0;

登录后复制

这个顺序嘛，一般是

[image] [repeat] [position] / [size] [attachment] [color]

登录后复制

。但其实只要

url

登录后复制

和

color

登录后复制

不冲突，其他顺序随意，浏览器挺聪明的。不过我还是建议新手一步一步来，等熟了再用缩写，免得搞混，排查问题也方便。

简单来个例子吧：






网页背景修改示例



<body>
  
    欢迎来到我的页面
    这里是一些示例内容，用来展示背景效果。页面滚动时，背景图片是固定的，而内容会随之滚动。
    这种设计在很多落地页或者展示型网站上很常见，能给用户带来不错的视觉体验。
    再多一点内容，确保页面有足够的滚动条。
    背景色的设置在图片下方，如果图片有透明部分，或者图片加载失败，背景色就会显现出来。
    这就像是给你的画布先涂一层底色，再贴上图案，有备无患。

登录后复制

如何让背景图片完美覆盖整个页面且不重复？

这个问题我遇到过太多次了，尤其是新手。图片一放上去，要么重复，要么就只显示一小块。其实解决起来，就那么几行 CSS。

核心就是

background-repeat: no-repeat;

登录后复制

和

background-size: cover;

登录后复制

。

no-repeat

登录后复制

很好理解，就是不让它重复。

cover

登录后复制

呢，它会智能地把图片缩放，直到它完全覆盖住你设定的那个元素区域（比如

body

登录后复制

），同时保持图片的宽高比。如果图片和元素的比例不一样，那图片肯定会被裁剪掉一部分，但好处是不会留白，看起来总是满满当当的。

通常我还会加上

background-position: center center;

登录后复制

，确保图片居中显示，这样即使有裁剪，也大概率是裁掉边缘不那么重要的部分。所以，一套组合拳下来就是这样：

body {
  background-image: url('path/to/your/image.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

登录后复制

如果你想让图片完整显示，宁愿留白也不想裁剪，那就用

background-size: contain;

登录后复制

。但这样一来，如果图片比例和元素不符，就会出现空白区域，这时候背景色就派上用场了，可以填充那些空白。选择哪个，看你的设计需求了，我个人更偏爱

cover

登录后复制

的视觉冲击力。

网页背景可以同时设置多张图片吗？

嗯，这问题问得挺有意思的，也确实是 CSS3 之后的一个很酷的特性：多背景图。答案是肯定的，而且挺方便的。

你只需要在

background-image

登录后复制

属性里，用逗号把多个

url()

登录后复制

隔开就行。比如：

background-image: url('image1.png'), url('image2.svg');

登录后复制

浏览器会按照你写的顺序，从上到下叠加这些图片。也就是说，你第一个写的图片会在最上面，第二个在它下面，以此类推。这有点像 Photoshop 里的图层概念，上面的会遮挡住下面的。

当然，如果你用了多张图片，那么对应的

background-repeat

登录后复制

、

background-position

登录后复制

、

background-size

登录后复制

等属性也都可以用逗号分隔，分别对应每一张图片。顺序要对齐，比如：

.multi-background {
  background-image: url('overlay.png'), url('main-bg.jpg'); /* overlay在上，main-bg在下 */
  background-repeat: no-repeat, repeat; /* overlay不重复，main-bg重复 */
  background-position: top left, center center; /* overlay在左上，main-bg居中 */
  background-size: 100px 100px, cover; /* overlay固定大小，main-bg覆盖 */
}

登录后复制

这个功能在做一些复杂背景，比如叠加纹理、水印或者特殊图案时特别有用。我个人用它做过一些带半透明渐变蒙版的背景，效果非常好，省去了在图片处理软件里合并的麻烦，而且后期修改起来也灵活多了。