当网站在移动设备上运行时,我试图隐藏两张图片。我尝试了多种解决方案,但我似乎无法开始工作。
这是我的代码片段
<li style="background-image: url(images/img_bg_1.jpg);" class="hideimg">
和
@media screen and (max-width: 600px) {
img.hideimg {
display: none;
}
}
最佳答案
您目前有两个主要问题。首先,您当前的 CSS 选择器 img.hideimg
正在寻找 <img>
元素。当您修改 <li>
, 你会想使用一个选择器来寻找 <li>
类似 li.hideimg
的元素或者不管是什么类型的元素.hideimg
都直接查找类.
其次,您直接使用 HTML 属性 ( style=""
) 分配背景图像。像这样的内联样式比样式表和样式 block 中的规则集具有更高级别的特异性,这意味着您以后将无法覆盖它(除非您使用 !important
,但您不想去那里!)
我会建议您从 HTML 中删除内联样式:
<li class="hideimg">
然后使用渐进增强的方法默认隐藏图片,然后在大屏幕上显示(而不是反过来):
li.hideimg {
display: block;
width: 300px;
height: 200px;
background: none;
}
@media screen and (min-width: 600px) {
.hideimg {
background-image: url("https://source.unsplash.com/random/300x200");
}
}
在 this fiddle 中查看结果.
关于html - 在手机上隐藏某些图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53461270/