原文出處：https://blog.csdn.net/zfz5720/article/details/80065047

我們在使用背景圖時，通常會用到background. 
今天遇到一個這樣的問題,在vue專案中，給一個按鈕加了一張背景圖片，用的是background,大小用的contain。現在有一個需求，當點選按鈕時，按鈕的背景圖片需要切換。問題來了，換是換了，但是背景的大小卻失效了。 
程式碼如下：

 <button :style="{background: stop}" style="background-size:contain;width: 40px; height: 40px;></button>
 

為什麼呢？ 

之所以這樣，是因為background是一個集合，它包括background-color,background-image,background-size等等， 
當你改變background時，他會把你之前的background下的子樣式覆蓋，

    this.$refs.btnBg.style.background = this.stop;      

你換了背景之後，之前的background-size就不起作用了。 
所以解決辦法：用background-image,

<button :style="{backgroundImage: stop}" style="background-size:contain;background-color: rgb(35, 39, 49);"></button>
 

 this.$refs.btnBg.style.backgroundImage = this.stop;

這樣就不會出現樣式覆蓋了，還有一點就是，使用background-image,帶有透明的png,透明部分不會顯示透明，你需要設定background-color