Question

我正在尝试根据屏幕宽度更改元素的背景。但是，我似乎无法让它发挥作用。这就是我在css文件中的内容：

.landscape {
    background-image:url(../images/thumb-1920-559128.jpg);
    min-height:100%;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;}

这是在我的剧本中。

if (container_width>mobSwitch)  {
    bg.attr("class","landscape");}

当我的CSS只有fill: #333333;时，它工作正常。现在它开始让我感到沮丧。请帮忙。

我把它推到了git。 https://github.com/faizaakhtar/interactive

查看iframe.html

Answer 1

您可以在不使用JavaScript的情况下使用CSS媒体查询来实现此目的。

HTML：

<div class="landscape">
  <!-- Your DIV content here. -->
</div>

CSS：

@media (min-width: 480px) { // Assuming mobWidth = 480px
   .landscape {
       background-image: url('../images/thumb-1920-559128.jpg');
       // Other styles.
   }
}

.landscape {
    background-image: none // Or an image.
    // Other styles.
}

Answer 2

尝试使用：

document.getElementById（＆＃39; test＆＃39;）。style.backgroundImage =＆＃34; url（＆＃39; yourimage.jpg＆＃39;）＆＃34;;，

并替换为您的图片URls

＆＃13;

document.getElementById('test').style.backgroundImage = "url('yourimage.jpg')";

＆＃13;

.landscape {
    background-image:url(../images/thumb-1920-559128.jpg);
    min-height:100%;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;}

＆＃13;

<div class="landscape" id="test">Hello test</div>

＆＃13;

用JavaScript改变背景

2 个答案: