Question

我实际上正在研究PHP风暴。当网站页面变小时，我想为容器流体添加不同的背景色。颜色由WordPress中的高级自定义字段（在本例中为“颜色选择器”）获取。

我是HTML的新手...我尝试使用

创建一行，然后创建一列

class="col-12 col-lg-6 col d-block d-lg-none"

和另一列

class="col-12 col-lg-6 col d-block d-lg-none"

它有效，但这不是我所需要的

<div class="container-fluid" style="min-height:600px; background- 
image:url('{!! get_field('head_image2')['url'] !!}'); background- 
repeat: no-repeat; background-size:cover; background-position:center 
top;" >
</div>

除了将页面缩小到移动设备时，背景颜色会更改。

Answer 1

如果将它们放在<style>标签中，它们应该可以完成工作：

.container-fluid {
  background-image: url('path-to-small-image.jpg');
}

@media (min-width: 768px) {
  .container-fluid {
    background-image: url('path-to-larger-image.jpg');
  }
}

@media (min-width: 1024px) {
  .container-fluid {
    background-image: url('path-to-very-large-image.jpg');
  }
}

以上内容针对您的div，并根据屏幕分辨率动态更改背景图像。这是使用常规的 CSS 完成的，并且可以使用诸如 SASS 或 LESS

之类的预处理器脚本语言进行简化。

如何在容器中获得不同的背景？

1 个答案: