做网站的时候怎么设置背景，很多新手一上来就随便找张大图铺满全屏，结果手机打开一看，字都看不清，加载慢得像蜗牛，老板看了直摇头。这问题太常见了，今天我不讲那些虚头巴脑的理论，直接上干货，教你怎么把背景设得既高级又实用。
咱们先说个真实案例。有个做装修的朋友，非要搞个全黑的背景配金色大字，说是高端大气。结果呢，客户访问率极低，因为眼睛看着累，而且图片太大，打开要好几秒。后来我帮他改了，用了浅灰色底，加个半透明的纹理，字体换成深色，转化率直接翻倍。你看，背景不是越花越好，而是越舒服越好。
第一步，确定你的网站定位和色调。别一上来就写代码，先想清楚你是卖什么的。如果是卖科技产品，冷色调、深色背景可能更合适；如果是卖母婴用品，暖色调、浅色背景更亲切。这里有个小技巧，去Pinterest或者Behance看看同行的网站，他们怎么用的，抄作业不丢人，关键是学会逻辑。
第二步，选择背景素材。千万别去百度图片随便搜一张就下载，很多图片有版权风险，而且分辨率不够，放大全是马赛克。推荐几个免费商用的高清图网站，比如Unsplash、Pexels。找图的时候，注意两点：一是颜色要单一，不要有太多杂乱元素；二是尺寸要够大，至少1920x1080像素，这样在大屏上才不会拉伸变形。
第三步，设置背景图片。这里涉及到做网站的时候怎么设置背景的核心代码。用CSS的话，最简单的方法是用background-image属性。比如：
`css
body {
background-image: url('your-image.jpg');
background-size: cover; / 关键！让图片覆盖整个区域，不变形 /
background-position: center; / 图片居中 /
background-repeat: no-repeat; / 不平铺，避免重复图案太乱 /
}
`
注意，background-size: cover 这个属性一定要加，不然图片在小屏幕上会被挤压，在大屏幕上会留白。很多新手漏掉这一步，导致页面看起来特别廉价。
第四步，处理文字可读性。这是最容易翻车的地方。背景图再好看，如果文字看不清，一切都是零。解决办法有两个：一是加一个半透明的遮罩层。在CSS里加一个伪元素或者单独的div，设置背景色为黑色或白色，透明度设为0.3到0.5，这样文字就能清晰显示。二是调整文字颜色，确保对比度足够。可以用在线工具检查对比度，比如WebAIM Contrast Checker。
第五步，优化加载速度。背景图太大是网站加载慢的头号杀手。压缩图片！用TinyPNG或者在线压缩工具，把图片体积压到200KB以内。如果图片必须很大，可以考虑用懒加载，或者分块加载。另外，如果背景是纯色或简单渐变，直接用CSS gradient代替图片，加载速度瞬间起飞，而且永远不会失真。
`css
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
`
这种渐变背景，代码量小，效果还高级，特别适合现代简约风格的网站。
最后，做个测试。在不同设备上看一眼，手机、平板、电脑，看看背景有没有变形，文字有没有看不清。如果都OK，那就齐活了。
做网站的时候怎么设置背景，其实没那么复杂，核心就是：图要高清但压缩，代码要规范，文字要清晰。别为了炫技而炫技，用户体验才是王道。记住，好的背景是衬托内容的，不是抢戏的。
希望这些经验能帮你避开坑，做出既好看又好用的网站。如果有具体问题，欢迎留言讨论。
