javascript 如何使用HTML阻止图像

30byixjq 于 2023-02-07 发布在 Java

关注(0)|答案(2)|浏览(118)

我有一个HTML网站。我想使用HTML代码在移动的应用程序中显示它。但我不想阻止/不加载原始网站背景，因为它非常大，你看不到它的移动。有没有办法用HTML / CSS / JavaScript做到这一点？

2条答案

如果屏幕大于XX，使用媒体查询加载背景图像。将媒体查询添加到CSS中。
将div更改为要加载背景图像的元素。

<style>
    @media (max-width:500px) {
      div {
        background-image: none;
      }
    }
</style>

由于移动优先是正确的方法，因此优选的是仅在视口达到所需大小时添加背景图像。

<style>
    @media (min-width: 644px) {
      div {
        background-image: url(/image/here.jpg);
      }
    }
</style>

因此，如果您想应用不同的样式（此处 * 删除背景图像 * 移动分辨率），您可以使用媒体查询
例如：

<style>
@media screen and (max-width:640px){
   element{
      background:none;
   }
}
</style>