Question

我正在使用名为Hugo（用GO编写）的静态页面构建器构建一个站点，该构建器动态地获取背景图像。我使用bootstrap v3作为基本主题。

<div style="background-image: url('{{ .path-to-dynamic-file }}');">

我需要为移动设备加载较小版本的图片。我将在cms中创建一个额外的字段来拉入移动图像。但是我无法通过css引用该文件，因为选择新图像时路径会发生变化。我宁愿不构建重复的div，因为里面有文本内容。

我唯一的选择是基于java脚本的图像交换还是我错过了一种古怪的技术。这必须是一个非常普遍的要求，所以我很想听听人们对此的看法。

Answer 1

您可以在css声明中使用media属性。看到这个链接：

HTML media Attribute

Answer 2

<div class="dyna-bg-img"></div>
<style>
.dyna-bg-img{
background: rgba(0,0,0,0) url('{{ .path-to-dynamic-file-for-desktop }}') no-repeat center center;
}
@media all and (max-width: 500px) {
.dyna-bg-img{
background-image: url('{{ .path-to-dynamic-file-for-mobile }}');
}
}
</style>

首先，不要使用任何标记内嵌图像。创造＆＃34;风格＆＃34;在您的布局中标记并调用您的图像。此代码将减少＆＃34;！important＆＃34;的使用。这就像一个魅力！

Answer 3

在我的情况下，在html文件中使用样式标记解决了我的要求：

<style>
      .hero-long {
        background-image: url('{{ .Params.media_item_2.api_object.fields.file.url }}');
      }

      @media (min-width: 768px) {
        .hero-long {
          background-image: url('{{ .Params.media_item.api_object.fields.file.url }}');
        }
      } 

 </style>

使用动态背景图像构建响应式div

3 个答案: