隐藏手机上的某些图像

Question

当网站在移动设备上时，我试图隐藏两个图像。我尝试了多种解决方案并尝试过，但似乎无法正常工作。

这是我的代码段

<li style="background-image: url(images/img_bg_1.jpg);" class="hideimg">

和

@media screen and (max-width: 600px) {
  img.hideimg {
    display: none;
  }
}

Answer 1

您当前有两个主要问题。首先，您当前的CSS选择器img.hideimg在寻找<img>元素。在修改<li>时，您想使用选择器来寻找<li>之类的li.hideimg元素，或者只是寻找类而不论哪种元素{{1 }}。

第二，您正在直接使用HTML属性（.hideimg）分配背景图像。像这样的内联样式比样式表和样式块中的规则集具有更高的特异性，这意味着以后您将无法覆盖它（除非您使用style=""，但您不想去那里！ ）

我建议您从HTML中删除内联样式：

!important

然后默认使用渐进增强方法隐藏图像，然后将其显示在大屏幕上（反之亦然）：

<li class="hideimg">

在this fiddle中查看结果。

Answer 2

不是img.hideimg。因为使用了<li>。正确使用li.hideimg或仅.hideimg