CSS变量var()搞定响应式背景图，这招真香！
咱今天聊个实用的小技巧——用CSS变量轻松切换不同设备下的背景图。说白了，就是让网页在电脑和手机上自动换不同的背景图，还不用写一堆重复代码，维护起来也贼方便。
到底是咋搞的？
简单讲，就是两步走：HTML里定义变量，CSS里用变量加媒体查询来切换。整个过程特别清晰，代码也不乱，后期改图啊、调样式啊都特别省事。
要哪两个文件？
- var.html：负责搭结构，顺带把背景图的地址用变量存好。
- var.css：专门管样式和响应式逻辑，比如啥时候换图。
具体咋写？
先看HTML这头，在标签里直接style定义两个变量：
<!--var.html --><div class="digital-marketing-banner clear"style="--bg-pc: url(https://placehold.co/3840x300);--bg-mc: url(https://placehold.co/790x240);">ATTR</div>
然后CSS这边就轻松了，直接 var() 把变量拿过来，PC端用PC的图，手机端用手机的图：
<!--var.css-->.digital-marketing-banner {background-image: var(--bg-pc);/* 其他样式照常 */}@media screen and (max-width: 769px) {.digital-marketing-banner {background-image: var(--bg-mc);/* 手机端样式 */}}
为啥能这么玩？关键在CSS变量的“继承”
这招的核心是CSS变量的查找机制：你在HTML标签里定义的变量，相当于给这个元素“自带”了一套配置。CSS里一调用var(--xxx)，浏览器就会从这个元素开始往上找，直到找到变量为止。而且内联定义的变量优先级高，不会被覆盖，稳得很。
CSS变量的作用域和优先级规则在这一技巧中扮演着重要角色。CSS变量具有块级作用域，这意味着它们只在定义它们的元素及其子元素中有效。当在HTML元素的style属性中定义变量时，它们在该元素上创建了一个作用域。而CSS中的var()函数会按照级联规则从内到外查找变量，确保了即使在不同的媒体查询中，变量也能正确引用。这种机制使得内联样式中定义的CSS变量能够覆盖外部样式表中的同名变量，从而实现了响应式背景图片的灵活切换。
这方法有啥牛的地方？
- HTML和CSS各干各的，不打架
图片地址全在HTML里，样式逻辑全在CSS里。改图？不用碰CSS。调样式？不用改HTML。团队协作时，前端和设计师各改各的，互不干扰。
- 适配手机和电脑，一点不含糊
@media判断屏幕宽度，小于769px就切到移动端背景图。还考虑了不同设备的图片比例，PC用1920/150（示例），手机用790/240（示例），避免拉伸变形。手机端还加max-height: 240px（示例），防止图片撑太高。image-set-webkit-image-set都照顾到了，老浏览器也能兼容。
- 背景图体验也拉满
background-size: cover让图刚好盖住区域，不拉伸background-position: top center让图居中显示background-repeat: no-repeat防止重复堆叠，干净利落。
还能再优化吗？
当然！比如可以加更多断点，适配平板这类中间尺寸；或者给图片加个懒加载，页面打开更快，用户体验更顺滑。
来源：Sharing pi
