背景 URL 的媒体查询问题

Question

我的 wordpress 站点中有一个 div 的 html 代码。

<div class="bwpb-column bwpb-video-holder backgr bwpb-colwidth-4 " style="color: rgb(255, 255, 255); text-align: inherit; width: 100%; min-height: 923px; height: 628px; background: url(http://www.tfeditor.com/wp-content/uploads/2015/11/TFE.png) 50% 100% no-repeat rgb(255, 255, 255);"><div class="bwpb-overlay" style="background-color:rgba(255,255,255,0.01)"></div><div class="bwpb-column-inner" style="padding: 0px 15px; margin-top: 461.5px;"></div></div>

我想做的就是设置一些媒体查询，如果有笔记本电脑、平板电脑或智能手机，这些媒体查询将更改此图像。

经过一些研究，我测试了这段代码，但它不起作用

（我已经将这个 div 的 class 设置为 .backgr）

@media (min-width: 1200px) {
  .backgr {
    background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/TFE.png") !important;
  }

@media (max-width: 992px) {
  .backgr {
    background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-02.png") !important;
  }
@media (max-width: 768px) {
  .backgr {
    background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-03.png") !important;
  }


@media (max-width: 481px) {
  .backgr {
    background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-04.png") !important;
  }

有没有人对我应该用什么代替我的代码提出任何建议，以便为 phone/tablet/laptop 加载其他图片？

Answer 1

您忘记在每个媒体查询上加上右括号 }。应该是这样的：

@media (min-width: 1200px) {
  .backgr {
    background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/TFE.png") !important;
  }
}  

@media (max-width: 992px) {
  .backgr {
    background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-02.png") !important;
  }
}  
@media (max-width: 768px) {
  .backgr {
    background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-03.png") !important;
  }
}

@media (max-width: 481px) {
  .backgr {
    background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-04.png") !important;
  }
}

Answer 2

在每个媒体查询之后你应该关闭括号 (}) .

用这个很好:

@media only screen and (max-width:700px) {
  .backgr {
    background-image: url("http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-02.png") !important;
  }
}

背景 URL 的媒体查询问题

Media queries issue with background URL

html

css

media-queries