怎样在vue2页面设置背景图片
时间: 2023-10-20 11:22:41 浏览: 44
1. 在vue组件中的style属性中设置背景图片
```html
<template>
<div class="container"></div>
</template>
<script>
export default {
name: "MyComponent",
data() {
return {};
},
computed: {},
mounted() {},
// 在组件中的style属性中设置背景图片
style: `
.container {
background-image: url('/static/images/background.jpg');
background-size: cover;
background-repeat: no-repeat;
}
`,
};
</script>
```
2. 在vue组件中的style标签中设置背景图片
```html
<template>
<div class="container"></div>
</template>
<script>
export default {
name: "MyComponent",
data() {
return {};
},
computed: {},
mounted() {},
};
</script>
<style>
.container {
background-image: url('/static/images/background.jpg');
background-size: cover;
background-repeat: no-repeat;
}
</style>
```
3. 在vue组件中引入外部css文件,并在该文件中设置背景图片
```html
<template>
<div class="container"></div>
</template>
<script>
import "./styles.css";
export default {
name: "MyComponent",
data() {
return {};
},
computed: {},
mounted() {},
};
</script>
```
在`styles.css`文件中设置背景图片:
```css
.container {
background-image: url('/static/images/background.jpg');
background-size: cover;
background-repeat: no-repeat;
}
```