边框遮挡背景图的解决方法是设置background-clip: padding-box，使背景仅绘制在内边距区域而不覆盖边框；建议同步设置background-origin: padding-box以确保定位准确，两者配合使用逻辑一致且兼容性良好。
边框遮挡背景图，本质是元素的背景默认绘制在 border-box 区域（含边框），而边框本身不透明时就会盖住底下的背景图。解决办法不是去掉边框，而是让背景“躲开”边框区域——用 background-clip 控制背景绘制范围。
background-clip 设为 padding-box 是最直接解法
默认情况下 background-clip: border-box，背景会铺满整个盒模型（含边框下）。改成 padding-box 后，背景只渲染在内边距区域（不含边框），自然就不会被边框遮住了。
- 写法很简单：
background-clip: padding-box; - 通常和
padding配合使用，否则 padding-box 和 content-box 没区别 - 注意：它不影响边框样式本身，边框照常显示，只是背景不再“伸进”边框底下
配合 background-origin 确保背景定位更可控
如果用了 background-position 或 background-size: cover，建议同步设置 background-origin: padding-box。否则背景虽不被裁切，但定位起点仍在 border-box 左上角，容易造成视觉偏移。
-
background-origin决定背景图定位的参考原点 -
background-clip决定背景图绘制的边界范围 - 两者设为相同值（如都用
padding-box）逻辑更一致，不易出错
兼容性与备用方案
现代浏览器（Chrome 1+, Firefox 4+, Safari 3+, Edge 12+）都支持 background-clip。若需兼容极老版本（如 IE8 及以下），可考虑替代思路：
立即学习“前端免费学习笔记（深入）”；
- 用伪元素
::before单独承载背景图，主体元素只负责边框 - 给容器加一层内边距，再用子元素或绝对定位的层来铺背景
- 避免用半透明/渐变边框叠加在背景图上（这类场景需额外处理混合模式）
基本上就这些。关键记住：背景被边框盖住，不是背景错了，是它画得太满了——收一收范围，问题就没了。
