最直接的，背景色：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 不冲突，其他顺序随意，浏览器挺聪明的。不过我还是建议新手一步一步来，等熟了再用缩写，免得搞混，排查问题也方便。

简单来个例子吧：

  

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

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

这个问题我遇到过太多次了，尤其是新手。图片一放上去，要么重复，要么就只显示一小块。其实解决起来，就那么几行 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覆盖 */
}

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

背景色和背景图片同时设置时，哪个会显示？

这是一个很基础但又经常让人有点迷糊的问题。简单来说，背景图片会覆盖在背景色之上。

你可以这样理解：背景色就像是画板上的第一层颜料，你先给它涂了个底色。然后，背景图片就像是你在这层底色上贴的贴纸。贴纸是实心的，它就会完全遮住下面的底色；如果贴纸是半透明的，或者它本身有镂空的部分，那么下面的底色就会透过这些透明或者镂空的地方显现出来。

所以，如果你的背景图片是完全不透明的，并且它覆盖了整个元素区域，那么你就完全看不到背景色。但如果图片有透明度（比如 PNG 图片的透明区域，或者你用了 rgba 颜色作为图片的一部分），或者图片没有完全覆盖整个区域（比如 no-repeat 且图片较小），那么背景色就会从图片未覆盖或透明的地方透出来。

这其实是一个很好的设计策略。我经常会给 body 设置一个主色调的 background-color，然后再放一个背景图片。这样即使图片加载失败，或者网络不好图片没出来，页面也不会是空白一片，至少有个颜色兜底，用户体验会好很多。而且，有时候图片边缘不那么完美，或者想让图片和页面整体色调更融合，背景色也能起到很好的衬托作用。它就像是你的安全网，总能给你提供一个视觉上的基础。

今天关于《网页背景怎么改？教你添加背景色和图片》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！