制作圖像滑塊但背景圖像不會響應其他屬性？

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 。

請記住，JavaScript代碼總是優先於CSS規則，除非在css屬性上使用!important標志。