制作图像滑块但背景图像不会响应其他属性？

Question

我最近刚刚获得了一些关于此代码的帮助，但它可以作为背景图像的滑块，唯一的问题是背景图像不响应css中的背景图像大小属性，现在是图像当我希望它们覆盖div时，它会完全放大。

这是它的样子：

所以这是我的HTML

<div id="headbar" onload="photoA()">
    <div class="headbar-title">THE ALL NEW 14 RANGE</div>
    <div class="button">FIND OUT MORE</div>

    <script type="text/javascript">
        var imageCount = 1;
        var total = 6;
        window.setInterval(function photoA() {
           var headbar = document.getElementById('headbar');
           imageCount = imageCount + 1;
           if(imageCount > total){imageCount = 1;}   
           headbar.style.background = "url('../img/img"+ imageCount +".JPG') no-repeat center center";
         }
       ,1000);
     </script>
</div>

这是我的css

#headbar {
  height: 50vh;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-top: 60px;
  display: flex;
  -webkit-flex-flow: column wrap;
  justify-content: center; 
  align-items: center;
  color: #eee;
}

任何帮助都将受到大力赞赏！

谢谢，

奥利

Answer 1

设置背景的javascript代码会覆盖css中的background-size属性。

<script type="text/javascript">
    var imageCount = 1;
    var total = 6;
    window.setInterval(function photoA() {
       var headbar = document.getElementById('headbar');
       imageCount = imageCount + 1;
       if(imageCount > total){imageCount = 1;}   
       headbar.style.backgroundImage = "url('../img/img"+ imageCount +".JPG')";
     }
   ,1000);
 </script>

#headbar {
  height: 50vh;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: 60px;
  display: flex;
  -webkit-flex-flow: column wrap;
  justify-content: center; 
  align-items: center;
  color: #eee;
}

这应该可以解决问题。我删除了background-position属性，因为它没有任何功能，并将background-repeat移动到 CSS 。只从代码中设置background-image。

请注意，除了在css属性上使用!important标志外，JavaScript代码始终优先于 CSS规则。