html - 根据宽度渲染动态生成的背景

Question

所以我有一个背景图像属性(作为引用元素中图像的字符串)，它属于 Badge 表。

我正在根据当前路径渲染每个背景图像。但我想以两个不同的最大宽度渲染不同的图像。

例如，

.badge-headline-background{style: "background-image:url(../assets/header-graphics/#{@badge.background})"}

以全宽呈现背景，而

.badge-headline-background{style: "background-image:url(../assets/small-header-graphics/#{@badge.background})"}

一旦最大宽度达到 700 像素左右，就应该使用较小的图像。

调整背景位置和背景大小不是一种选择。它必须是两个单独的图像。

任何意见表示赞赏。 谢谢!

Answer 1

这应该可以，使用动态值

.badge-headline-background

:css
  .badge-headline-background { 
    background-image: url("../assets/header-graphics/#{@badge.background}");
  }
  @media (max-width: 700px) {
    .badge-headline-background { 
      background-image: url("../assets/small-header-graphics/#{@badge.background}");
    }
  }