使用element ui背景图
时间: 2024-06-14 21:03:04 浏览: 85
Element UI表单设计及代码生成器
Element UI 是一个基于 Vue.js 的开源 UI 组件库,提供了一套丰富的、易于使用的界面组件。要在 Element UI 中使用背景图片,你可以使用 `img` 标签或者结合 CSS 设置 `background-image` 属性。以下是一些示例:
1. 使用 `img` 标签:
```html
<el-image :src="bgImageUrl" alt="背景图片"></el-image>
```
在 Vue 实例中,`bgImageUrl` 可以是一个字符串路径,也可以是一个响应式的数据属性。
2. CSS 设置背景图片:
```html
<el-container class="custom-bg">
<div class="container-content">
...
</div>
</el-container>
<style scoped>
.custom-bg {
background-image: url("~@/assets/images/bg.jpg"); /* 使用相对路径或绝对路径 */
background-size: cover; /* 使图片铺满容器 */
background-repeat: no-repeat;
background-position: center center;
}
</style>
```
在这里,`.custom-bg` 类应用了背景图片,并设置了样式使其适应容器。
阅读全文