Question

css样式“ background-position：center;”错过了，为什么？因为背景将覆盖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>

CSS样式丢失

1 个答案: