vue 设置背景图地址_vue-生成自动铺满的背景图

生成如上图的背景图

需要以下的代码：

div部分：

<template>
<div  class="bg" :style ="bg">
</div>
</template>

script部分：

<script>
export default {
   name: 'fash',
  data() {
    return {
        bg: {
        backgroundImage: "url(" + require("../../assets/teaforence_logo.png") + ")",
        backgroundRepeat: "repeat",
        backgroundSize: "40vh 20vw",
   },
    };
  },
   methods: {
   
  },
  mounted() {
 
  }
};
</script>

其中backgroundSize是控制背景单位图片的尺寸的，而backgroundRepeat是决定图片是否进行重复的。

backgroundSize

CSS3 background-size 属性​www.w3school.com.cn

backgroundRepeat

CSS background-repeat 属性​www.w3school.com.cn

如果需要将一张图片铺满整个背景则可以参考这个教程的代码：

<template>
<div  class="bg" :style ="bg">
</div>
</template>

<script>
export default {
   name: 'fash',
  data() {
    return {
        bg: {
   backgroundImage: "url(" + require("./img/fash.png") + ")",
   backgroundRepeat: "no-repeat",
   backgroundSize: "100% 100%",
   },
    };
  },
   methods: {
   
  },
  mounted() {
 
  }
};
</script>

vue项目设置背景图片_tian_jiangnan的博客-CSDN博客_vue 背景图片​blog.csdn.net