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

我正在使用名为Hugo（用GO编写）的静态页面构建器来构建网站，后者可动态地获取背景图像。我使用bootstrap v3作为基本主题。使用动态背景图像构建响应式div

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

我需要为图片加载较小的图片版本。我将在cms中创建一个额外的字段以吸引移动图像。但是我不能通过css来引用文件，因为当选择新图像时，路径将会改变。我宁愿不制作重复的div，因为里面有文字内容。

是我唯一的选择基于Java脚本的图像交换或有一种古怪的技术，我错过了。这一定是一个非常普遍的要求，所以我想有兴趣听听人们对此的处理方法。

来源

2016-04-25 nickf

你可以在css声明中使用media属性。请参阅此链接：

HTML media Attribute

来源

2016-04-25 10:47:29 Octavio

<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>

首先，不渲染任何标记图像嵌入。创建“样式”标签并在您的布局中调用您的图像。这段代码将减少“！important”的使用。这将像魅力一样工作！

来源

2016-04-25 10:50:10

在使用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>

来源

2016-04-25 11:03:59 nickf

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

回答

相关问题