背景图片的网站代码，说穿了就三行CSS的背景事。但就这三行，图片坑多到能埋人。代码 我见过太多新手直接写`background-image: url("bg.jpg")`，网站然后图片平铺得跟瓷砖似的背景。要命的图片是，图片加载失败时，代码那个裂开的网站图标比没背景还难看。 真正能扛事的背景写法是这样： ```html 页面内容 ``` `cover`这玩意儿是关键。它让图片按比例缩放，图片直到完全覆盖整个容器。代码图片短边不够就裁掉，网站长边超出就隐藏。背景所以不管屏幕是图片手机竖屏还是带鱼屏，背景都不会露白边。代价是图片边缘会被切掉一部分——所以选图时别把重要内容放在边角。 `center`负责定位。图片居中，焦点不跑偏。如果你想让背景偏左或偏上，改成`left top`或者`25% 75%`都行。百分比是图片对应位置对齐容器对应位置，不是偏移量，这个得记牢。 `fixed`让背景固定，滚动内容时背景不动。视觉上挺高级，但移动端Safari对`fixed`的支持一直有毛病，背景会跟着滚或者干脆消失。实在要用，得加个媒体查询，在手机上改成`scroll`——意思就是背景跟着页面一起滚，老实点。 还有个细节，图片路径用相对路径时，注意CSS文件位置。CSS在`css/style.css`里，图片在`images/bg.jpg`，那路径得写成`../images/bg.jpg`。这破事我见过太多人卡半天。 如果背景是渐变色或者纯色，那更简单： ```css background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); ``` 这一行代码同时搞定颜色和方向，渐变从左上到右下。比图片省流量，加载快，适配性也好。渐变背景做不好容易显得廉价，颜色搭配要克制，别整红配绿那种。 想用多张图片叠加？用逗号分隔： ```css background-image: url("overlay.png"), url("bg.jpg"); background-size: auto, cover; ``` 第一层在上，第二层在下。overlay通常是半透明PNG，用来加纹理或者蒙层。这个技巧做毛玻璃效果或者暗化背景很实用——比如背景图太亮，文字看不清，叠一层半透明黑色就解决了。 背景图加载慢的问题，别忽略。大图动辄几MB，用户等半天看到白屏，直接关页面。用WebP格式能压掉一半体积，再配合``提前加载。要更狠的，用`srcset`配合`picture`标签做响应式图片，手机加载小图，电脑加载大图，省流量还快。 最后提一嘴`background-blend-mode`，这玩意儿能直接混合背景图和背景色。比如`background-color: #333; background-image: url("texture.png"); background-blend-mode: multiply;`，纹理图直接和深灰色融合，做出质感背景。浏览器支持已经不错了，就是IE死透了，没人管它。 背景代码看着简单，实际是细节活。图片选不好，代码写得再漂亮也白搭。记住一句话：背景是衬托内容的，不是抢戏的。对比度不够就加蒙层，细节太多就模糊处理。代码只是工具，审美才是天花板。 |
喜欢
讨厌