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的类设置为.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;
  }

有没有人有任何建议我应该放什么而不是我的代码所以它会加载手机/平板电脑/笔记本电脑的其他照片？

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

2 个答案: