css 如何在不加载任何页面的情况下使用媒体查询来更改背景图像？

fd3cxomn 于 2022-11-26 发布在其他

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

在不加载任何页面的情况下，我想使用JavaScript更改背景图像。

const getbg = (bgimg) => {
  if (body.offsetWidth > 780) {
    body.style.backgroundImage = `url(${bgimg[0]})`;
  }
  else if (body.offsetWidth > 780 && body.offsetWidth > 580) {
    body.style.backgroundImage = `url(${bgimg[1]})`;
  }
  else {
    body.style.backgroundImage = `url(${bgimg[2]})`;
  }
};

我的程式码无法完美运作。

css

来源：https://stackoverflow.com/questions/74551616/how-to-change-background-images-using-media-query-without-any-page-load

2条答案

按热度按时间

dddzy1tm1#

为什么不像下面这样使用css？它仍然会在没有页面加载的情况下改变你的bg图像。

@media(max-width:650px){
 .your-class{
   backround-image: url('image1.jpg');
  }
}

@media(max-width:768px){
 .your-class{
   backround-image: url('image2.jpg');
  }
}

赞(0）回复(0）举报 2022-11-26

vwkv1x7d2#

一个建议，用它作为正面答案。
不要使用任何javascript来实现这个简单的css过程。
ps：如果你在js框架上工作，它应该有自己的方法来实现这个。

/* ================= this is latest way of it. ================= */

background-image: image-set(
    url("small-landscape-750x536.jpg") 750w,
    url("large-landscape-2048x1536.jpg") 20480w);
}

/* ================= this is latest way of it. ================= */

赞(0）回复(0）举报 2022-11-26

我来回答

css 如何在不加载任何页面的情况下使用媒体查询来更改背景图像？

2条答案

相关问题

热门标签

最新问答