网页制作如何添加背景图片？其实很多人第一步就错了。别光盯着颜色选，图没铺好，页面直接土掉渣。这篇不讲废话，只讲怎么让背景图既清晰又不抢戏。
先说个最基础的。很多新手喜欢直接把图片塞进div里，或者用img标签。大错特错。背景图是背景，不是内容。你得用CSS。
最简单的写法，就是background-image属性。
比如：
background-image: url('bg.jpg');
就这么一行。看着简单吧？但问题来了。图片可能很小，也可能很大。如果图片小，它会像瓷砖一样重复铺满整个屏幕。这就很丑。所以，第二个属性必须跟上：background-repeat。
设为no-repeat。这样图片就不会重复了。
但这时候，如果图片比屏幕小，它只会显示在左上角。中间大片空白，很难看。这时候，background-position就派上用场了。
设为center center。图片就会乖乖待在正中间。
听起来挺顺？别急，坑还在后面。
你想想，不同人的屏幕大小不一样。有的用笔记本，有的用超大显示器，还有的用手机。如果你的背景图是固定的，手机上看可能只能看到图片的一角，或者被切得乱七八糟。
这时候，你得用background-size。
设为cover。这是最推荐的。cover的意思是，让图片保持比例，尽可能大地覆盖整个容器。哪怕被切掉一点边缘也没关系，反正背景嘛，没人盯着看。
还有一种情况，图片太大，加载慢。用户打开网页，半天黑屏，体验极差。这时候，你得考虑压缩图片。别用原图！用TinyPNG这种工具压一下。或者直接用WebP格式，现在浏览器都支持，体积小画质还好。
我有个朋友，之前做电商首页，背景图用了个4MB的高清图。结果用户打开页面，转圈转了五秒。转化率直接掉了一半。后来他换成压缩后的图，加上懒加载，数据立马回升。这就是教训。
再说说颜色。有时候，图片太花，文字看不清怎么办？加个遮罩。
在背景图上面叠一层半透明的黑色或白色div。或者用CSS的linear-gradient。
比如：
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('bg.jpg');
这样文字就清晰了，图片也不会太刺眼。
还有个小细节，移动端适配。
手机屏幕窄，背景图如果太宽，两边会被切掉。这时候，你可能需要针对不同屏幕，写不同的背景图。用@media查询。
@media (max-width: 768px) {
body {
background-image: url('mobile-bg.jpg');
}
}
这样，手机上用竖构图，电脑上用横构图。体验好很多。
最后，别忘了fallback。
万一图片加载失败呢？或者用户开了图片屏蔽？你得给个默认颜色。
background: #f0f0f0;
background-image: url('bg.jpg');
先写颜色，再写图片。图片加载不出来，颜色就顶上去了。虽然不好看，但至少不崩。
其实，网页制作如何添加背景图片，核心就三点：别重复、要覆盖、要兼容。
别太纠结细节，先跑通流程。图片选对了，位置放对了，颜色调对了，基本就稳了。
我见过太多人，为了一个背景图，折腾半天滤镜、渐变、动画。结果内容都没写好。本末倒置。
背景只是衬托。内容才是王道。
所以，别花太多时间纠结背景图本身。把它当成一个工具，用得顺手就行。
记住，用户打开网页，前3秒决定去留。背景图要是加载慢，或者看着难受，人家直接关掉了。
所以，速度第一，美观第二。
压缩图片，用cover，加遮罩，适配移动端。这四招，够你应付90%的场景了。
剩下的10%，看具体需求再调。
别怕试错。多看看别人的网站，右键检查元素，看看人家怎么写的。偷师，也是一种能力。
好了，就这些。希望能帮你省下点折腾的时间。去试试吧。
