Question

我正在处理的项目现在允许用户上传图像。当图像上传时，它会动态添加到div的背景图像中，因此我使用了内联样式。

例如：

<div style="background:url('<?=$fleet->bg_img?>') right no-repeat;"></div>

现在我不希望这个bg图像出现在所有屏幕尺寸上，所以我想在宽度为870px以下的所有屏幕上隐藏它。如果将背景图像设置为类，则可以使用媒体查询轻松隐藏在较小的设备上。但是因为它不是那种难以理解我是如何隐藏在较小的设备上的呢？

我是否有办法在仍然将其用作内联样式的同时隐藏此背景图像。

Answer 1

您可以简单地使用CSS媒体查询

@media only screen and (max-width: 870px) {
    .myDiv {
        background: none !important;
    }
}

我通常不建议使用!important，但在这种情况下，它将是覆盖内联样式的唯一方法。

Answer 2

我知道这是一个旧线程，但是对于任何寻求解决方案的人，您可以尝试使用它代替！important ：

   bg_img？>'）对不重复；” class =“ bg-element”>

CSS：

  .bg-element {
      背景大小：0；
      背景重复：不重复；
}

@media全部和（最小宽度：870像素）{
      .bg-element {
          背景尺寸：封面；
      }
}

使用 background-size：0 使背景消失，并添加 background-repeat：no-repeat 使下面的背景颜色（如果已定义）可见。 / p>

然后在媒体查询中，您可以再次简单地定义背景图像的大小并使其可见。

与使用！important 相比，它给您带来更多的自由，如果您想覆盖它，以后可能总是会引起问题。

Answer 3

为什么不添加类似

的类

<div style="background:url('<?=$fleet->bg_img?>') right no-repeat;" class="user-bg"></div>

然后

@media (max-width: 870px){
    .user-bg{
        background-image:none !important;
    }
}

Answer 4

示例：http://jsfiddle.net/EgJLK/1/

HTML

  <div class="imageClass" style="background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQhyWPmOb6wqo1AzCfeS2OIgs_wVY08bXwJrl4fvTwNYSWaM2w0T-O7CJwo');"></div>

的JQuery / JS

  $(function(){
     $(window).resize(function(){
        if($(window).width() < 870){
            $('.imageClass').css({'background-image': 'none'});
        }else{
            $('.imageClass').css({'background-image': 'url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQhyWPmOb6wqo1AzCfeS2OIgs_wVY08bXwJrl4fvTwNYSWaM2w0T-O7CJwo")'})
        }
     });
   });

相应地隐藏内联样式背景图像

4 个答案: