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