两种情况:
- 动态绑定后台传来的图片
// srcImgUrl 在data(){ return{ srcImgUrl: ""}} 定义好的- 我们自己文件夹的图片(注意:这种方式一定要用require的方式)
【Vue动态绑定背景图片及三元运算操作】也可以在data中先存储,在引用
data() {
return{
// 这种方式也要用require
srcImgUrl : require('../../assets/img/001.png')
}
}用三元运算符实现第1第2第3背景颜色不一样
- background-repeat 属性:背景图片 - 设置定位于不平铺
- background-repeat: no-repeat
- background-position: 设置背景图片的起始位置
- background-origin: background-Origin属性指定background-position属性应该是相对位置
- background-size: background-size 属性指定背景图片大小
- 语法: background-size: length(长度)|percentage(百分比)|cover(覆盖)|contain(包含)
推荐阅读
- 我想写一个 Vue3 组件库，我该怎么开始（）
- 7个 Vue3 中的组件通信方式
- Vue3中实现路由跳转的过渡动画(一)
- Vue3中插槽的概念和用法
- 关于Vue3的defineProps用法
- elementUI Tree树形控件如何设置默认树节点
- vue2 生命周期详解
- element-uishow-overflow-tooltip 使用
- 深入理解 v-model 的原理