vue2里在标签里插入背景图片能写个demo吗
时间: 2024-02-09 15:06:56 浏览: 237
当在 Vue2 中使用背景图片时,我们可以通过绑定 style 属性并设置 `background-image` 样式来实现。下面是一个简单的示例:
```html
<template>
<div class="container" :style="{ backgroundImage: 'url(' + backgroundImageUrl + ')' }">
<!-- 页面内容 -->
</div>
</template>
<script>
export default {
data() {
return {
backgroundImageUrl: 'https://example.com/background-image.jpg'
}
}
}
</script>
<style>
.container {
/* 设置容器的高度和宽度 */
height: 100vh;
width: 100%;
/* 设置背景图片的填充方式 */
background-size: cover;
background-position: center;
}
</style>
```
在上面的示例中,我们将 `backgroundImageUrl` 绑定到容器的 `style` 属性中,并在其中设置 `background-image` 样式。此外,我们还设置了容器的高度、宽度和背景图片的填充方式。
请注意,我们使用了 Vue2 的语法,即通过 `v-bind` 绑定 `style` 属性并使用对象语法来设置样式。在 Vue3 中,我们可以使用更加简化的写法,即直接将样式对象作为属性值传递给元素。
阅读全文