CSS背景图片自适应设置
背景图片的自适应设置，算是 CSS 里挺实用的一个技巧。尤其是做响应式页面的时候，不想让图片拉伸变形，或者显示不完整，就可以靠它搞定。用background-size: cover或contain基本就能满足大多数场景，搭配background-position和no-repeat用，效果还不错。
图片多半不会刚好跟容器一样大，那就需要它自己适配大小。这时候cover会把容器填满，但会裁剪一部分图，而contain就会完整显示图，不过会留白。看需求来就好，别死用一个值。
如果你想更深入了解怎么灵活用这些属性，可以看看CSS 背景图片自适应大小设置这篇文章，讲得还挺详细的。
另外，背景图片自适应调整这篇也蛮实用的，里面有不少场景示例，尤其适合还在踩坑的朋友。
实用建议：别忘了兼容老浏览器的问题，像IE6 的 PNG 兼容那种老问题，虽然现在用得少了，但要是碰到老项目，还是得注意。
文件大小：721.68KB
评论区