Question

我认为这实际上很容易解决，但我很难过！

我使用样式 background-size：cover; 为div设置了背景图像，这使得它填充了div。这非常有效。

问题来了，因为我在页面上有一个onclick命令来更改背景图像，这也很好。唯一的问题是，当我更改背景图像时， background-size：cover; 似乎丢失了。

我想知道是否在onlick更改样式中添加以下内容（正如我使用无重复中心修复那样），但是当我这样做时，我会破坏所有内容。

-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

HTML

<a href="#" onclick="
              document.getElementById('backgroundimage-gallery').style.background = 'url(images/galleries/art/<?php echo $row_images['name']; ?>.jpg) no-repeat center center fixed';" >
              <img src="images/galleries/art/<?php echo $row_images['name']; ?>.jpg" alt="" width="76" height="42" />
              </a>

CSS

#backgroundimage-gallery{ 
  background: url(images/backgrounds/galleries/photos-of-site.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Answer 1

如果您打开chrome dev-tools的控制台并输入var el = document.getElementById('backgroundimage-gallery');，则可以通过键入el.style.background = ....

来测试如何设置背景

我还没有测试过如何通过javascript using the shorthand-property for background设置样式。但我认为你错误的原因就在那里。

demo should be what you are looking for

function setImage(theme)
{                           
    var imageUrl = "http://stackexchange.com/users/flair/774143.png?theme=" + theme;
    var el = document.getElementById('backgroundimage-gallery');    

    el.style.backgroundRepeat = "no-repeat";
    el.style.backgroundPosition = 'center center';
    el.style.backgroundImage = "url('" + imageUrl + "')";
    el.style.backgroundSize = 'cover';
}

这个HTML

<div class="container" id="backgroundimage-gallery">
   <div class="image-item">
     <a href="#" onclick="setImage('hotdog')" >
        <img src="http://stackexchange.com/users/flair/774143.png?theme=hotdog" 
             alt="" width="76" height="42" />
     </a>
  </div>        
  <div class="image-item">
     <a href="#" onclick="setImage('dark')" >
        <img src="http://stackexchange.com/users/flair/774143.png?theme=dark" 
             alt="" width="76" height="42" />
     </a>
  </div>            
</div>

Onclick div改变不同div的背景风格失去了一些造型css

1 个答案: