CSS样式丢失

Question

CSS样式“ background-position：居中；”错过了，为什么？因为背景将覆盖background-position

 <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="div1" :style="'background-position: center; height:200px;width:300px;background: url('+imgURL +')'"></div> </body> <script> var vm = new Vue({ el: "#div1", data: { imgURL: 'https://www.baidu.com/img/bd_logo1.png' } }); </script> </html> 

Answer 1

在你的CSS要更换的background-position与background在稍后的规则。 如果将background更改为background-image ，它将起作用。

 <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="div1" :style="'background-position: center; height:200px;width:300px;background-image: url('+imgURL +')'"></div> </body> <script> var vm = new Vue({ el: "#div1", data: { imgURL: 'https://www.baidu.com/img/bd_logo1.png' } }); </script> </html>