Question

所以我有一个背景图像属性（作为引用项目中图像的字符串），属于徽章表。

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

例如，

.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})"}

一旦最大宽度达到700px左右，

应使用较小的图像。

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

任何意见都表示赞赏。谢谢！

Answer 1

.class {background-image: url(whatever-1.jpg);}    
@media (max-width:700px) { .class {background-image: url(whatever-2.jpg;)} }

Answer 2

这应该可以使用动态值

.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}");
    }
  }

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

2 个答案: