Question

我希望我的网站仅删除我可以使用

完成的移动设备上的图片

@media (max-width: 480px) {
  .slide-6996 {
    display:block !important;
  }
  .slide-6996 {
    display:none !important;
  }
}

但是，我仍然想显示幻灯片上现在不显示的文本。我已经在CSS中尝试过了，但是显然没有用。

@media (max-width: 480px) {
  .slide-6996 {
    display:block !important;
  }

  .slide-6996 {
    display:none !important;
    #slide-content {
      display: block !important; 
    }
  }
}

此特定实例的HTML是

<div id="slide-6996" class="slide slide-6996 cycle-slide-active slide-left light" style="background-image:url(http://18.205.33.160/wp-content/uploads/2019/02/ITData-Home-Page2018-01-edited.jpg);">    
  <div class="slide-body">
    <div class="container">
      <div class="slide-caption">
        <div class="slide-content">
          <h1><strong>COMPREHENSIVE IT SERVICES YOU CAN TRUST</strong></h1>
        </div>

        <h2 class="slide-title"> Let us help you develop an IT Optimization Strategy and Define your technological priorities </h2>

        <a class="slide-link button button-medium" href="http://18.205.33.160/index.php/itone-method/?customize_changeset_uuid=56ed31cf-ab75-46c7-bf6a-d1eb013fed32&amp;customize_messenger_channel=preview-0&amp;customize_autosaved=on" target="_self"> Learn how we can help you succeed </a>
      </div>
      <div class="slide-image"></div>
    </div>
  </div>
</div>

还应该指出，我使用WordPress，并且对可能解决我的问题的所有建议的插件持开放态度。

Answer 1

您不能使用外部CSS覆盖内联CSS，但是您可以做的就是稍微编辑HTML。通过在该div和外部CSS中添加新类，您可以制定适用条件和适用时间的规则。

因此，在第一行中添加一个新类“ background-cls”，您的第一行必须像这样：

<div id="slide-6996" class="slide slide-6996 cycle-slide-active slide-left light background-cls">

然后在外部CSS中添加以下内容：

@media (max-width: 480px) {
  .background-cls {
    background-image: none !important;
  }
}
.background-cls {
  background-image: url(http://18.205.33.160/wp-content/uploads/2019/02/ITData-Home-Page2018-01-edited.jpg);
}

这是一个小提琴：https://jsfiddle.net/2xb34dev/

Answer 2

您可以使用@media，然后隐藏该类。

@media (max-width: 576px){
  .yourclass{
    display:none;
  }
}

您可以选择更大的尺寸为767px或992px，也可以为@media设置尺寸，例如以下示例：

@media screen and (max-width: 576px) and (min-width: 767px) {
  .yourclass {
    display: none;
  }
}

Answer 3

使用您的标记应该可以：

@media only screen and (max-width: 480px) {
  .slide-6996 .slide-image {
    display: none !important;
  }
}

希望可以解决这个问题。

Answer 4

您尝试过隐藏img吗？

ObjectSpace.each_object(Object).to_a.size
  #=> 35362

仅使用CSS在移动设备上隐藏图像

4 个答案: