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

我想让我的网站删除一个图像只有在手机上，我能够完成使用

@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>

您可以信赖的全面IT服务
让我们帮助您制定IT优化战略，并确定您的技术优先级

---

同样值得注意的是，我在WordPress上，对任何可能解决我的问题的建议插件都持开放态度。

您可以使用

@media

然后隐藏该类

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

您可以选择767px或992px作为更大的尺寸，也可以给您的

@介质提供介于两个尺寸之间的尺寸，如以下示例所示：

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

对于您的标记，这应该是有效的：

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

希望能解决这个问题。
您不能使用外部CSS覆盖内联CSS，但您可以做的是稍微编辑一下HTML。通过在该div和外部CSS中添加一个新类，您可以制定应用内容和应用时间的规则

因此，在第一行中添加一个新类“background cls”-您的第一行需要如下所示：

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

@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);
}

这里有一个问题：
我在html中没有看到任何图像，除了
，它也没有关闭。你遗漏了什么吗？幻灯片-6996在html中的什么位置？也没有图像请删除！重要，因为css无法覆盖它。为文本添加display:block，为媒体查询中的图像添加display:none。您使用的是SCSS还是纯CSS？单击底部的按钮，该按钮表示editdidnt对我不起作用，但是谢谢你花时间来尝试help@jblaupunkt请使用编辑后的问题并报告。这将带回我试图删除的图片和文本，但感谢您的帮助我猜我误读了-您想隐藏吗。480px以下的幻灯片图像？是的，如果可能的话，仍然保留文本和按钮。请尝试：display:none！正如我建议的那样重要吗？不幸的是，这没有起作用，它在桌面上投射了我想要的效果，但背景图像仍然在手机上，我认为这让我走上了正确的轨道，尽管我需要做的是：）这实际上与我现在想要的完全相反哈哈哈，它在桌面上没有投射背景图像，在手机上也有，绝对正确：）这是在小提琴上工作（尝试在垂直分隔线上调整大小），所以它也应该在移动设备上工作。也许这只是屏幕大小的问题——试着用@media max width size进行实验。另外，如果这个答案让你更接近解决方案-请随意接受我的答案。对不起，你实际上是对的，我犯了一个非常严重的错误，只是在我的浏览器中编辑HTML（并在实际的源代码上执行CSS），我会将新的HTML放入并报告，谢谢你的帮助：）我不知道如何用这个主题在wordpress中更改我的html，但我将继续并将其标记为正确，因为这似乎是正确的解决方案