vue动态设置背景图片后显示异常

:style 绑定会覆盖整个 background 复合属性 ，而 background-size、background-repeat 等是 background 的子属性。

:style="{ background: `url(...)` }"

这相当于设置了完整的 background 属性为 url(...)，会重置 background-size、background-repeat 等为默认值（即 repeat + auto），导致：

• 图片以原始尺寸显示（可能很大）
• 超出容器被裁剪
• 没有按预期 cover 缩放

✅ 虽然在 style="" 中写了 background-size: cover，但由于 :style 的优先级更高且覆盖了 background，这些样式可能未生效。

✅ 正确解决方案

✅ 推荐做法：使用 backgroundImage + 显式设置背景子属性

将 :style 改为只控制 backgroundImage，其他背景样式保留或也通过 :style 明确设置。

例如设置成

:style="{ backgroundImage: `url(${imgbg})`, backgroundSize: 'cover', backgroundRepeat: 'no-repeat', backgroundPosition: 'center' }"

同时，可以删除内联 style 中的重复背景样式（避免混淆）