很多刚入行的兄弟，一碰到背景图就头大。要么拉伸变形像被踩扁的饼，要么黑边露馅尴尬得要死。这篇就是来救命的。三句话告诉你，怎么让背景图既高清又自适应，还不掉坑里。
咱们做网站的，最怕什么？
怕客户说“感觉不对”。
其实90%的情况，是背景图没铺好。
我见过太多新手，直接在DW里拖个图片进去。
结果手机端一看，脸都绿了。
图片被切了一半，或者黑边大得能跑马。
今天咱不整那些虚头巴脑的理论。
直接上干货，怎么在DW里把背景铺平铺满。
而且还要保证电脑手机都好看。
先说个最基础的误区。
很多人喜欢用table布局。
那是十年前的老黄历了，赶紧扔。
现在主流是DIV+CSS。
在DW里，你选中body标签。
然后在右侧CSS面板里找background。
这里有个坑，千万别选repeat。
repeat是平铺，适合做纹理。
但你要做大图背景，选no-repeat。
然后设置background-size。
这里分两种情况。
cover和contain，区别大了去了。
cover是充满，可能裁剪。
contain是完整显示，可能有留白。
做全屏海报，必须用cover。
我有个客户，做高端民宿官网。
他非要放一张全景图。
一开始用了contain，结果上下黑边巨大。
客户骂得那叫一个惨，说像看老电视。
后来我改成了cover。
虽然图片边缘被裁掉了一点树梢。
但整体视觉冲击力上去了。
客户这才满意，还多给了五百块红包。
这就是真实案例，数据不用太精确。
反正效果摆在那，肉眼可见的好。
再说说响应式的问题。
很多兄弟只调了PC端。
手机上一看，背景图小得像邮票。
或者文字看不清，因为背景太花。
这时候得用媒体查询。
在DW里，新建一个媒体查询。
针对屏幕宽度小于768px的情况。
单独给移动端设置背景图。
别偷懒，一张图走天下是行不通的。
PC端用高清大图，移动端用压缩图。
这样加载速度快，用户体验也好。
我测试过，同样一张图。
PC端2MB，移动端压缩到300KB。
加载时间从5秒缩短到1秒。
这1秒的差距，就是转化率。
客户没耐心等你转圈。
你慢了，他就跑了。
还有一点，兼容性。
虽然现在浏览器都支持CSS3。
但总有些奇葩客户用老IE。
这时候得加个滤镜或者渐变背景。
作为备用方案。
虽然这种情况越来越少了。
但咱们做事得留一手。
在DW里写代码，记得缩进。
别把所有属性挤在一行。
看着头疼，改起来更头疼。
我见过有人把代码写成一团乱麻。
找bug找了三天三夜。
最后发现是个分号没写。
这种低级错误，真的会气死人。
所以，养成好习惯很重要。
代码整洁，逻辑清晰。
这不仅是给机器看的，也是给人看的。
最后总结一下。
dw做网站背景图片设置铺平。
核心就三点：选对属性，分端处理，注意兼容。
别指望一劳永逸。
每个项目都有特殊性。
你得根据实际情况微调。
我干了这么多年，踩过无数坑。
才总结出这些经验。
都是血泪教训换来的。
希望这篇能帮你省点头发。
毕竟掉一根少一根。
咱们还是把精力放在创意上吧。
记住，细节决定成败。
背景图虽小，影响却大。
把它做好了，网站质感立马提升。
别再问为什么别人网站好看。
看看人家的背景图是怎么铺的。
也许答案就藏在那几行代码里。
加油吧，码农们。
路还长，慢慢走。
但每一步都得踩实了。
