两种状况:

  1. 动静绑定后盾传来的图片
<div class="img" :style="{ backgroundImage: 'url('+ srcImgUrl +')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">// srcImgUrl 在data(){ return{ srcImgUrl: ""}} 定义好的
  1. 咱们本人文件夹的图片(留神:这种形式肯定要用require的形式)
<div class="img" :style="{ 'backgroundImage': 'url('+ require('../../assets/01.png') +')',no-repeat center center', 'backgroundSize':'100% 100%'}">

也能够在data中先存储,在援用

<div class="img" :style="{ backgroundImage: 'url('+ srcImgUrl +')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">data() {return{// 这种形式也要用requiresrcImgUrl : require('../../assets/img/001.png')}}

用三元运算符实现第1第2第3背景色彩不一样

<i :style="{'background-color':index ===0 ? 'red' :index ===1 ? 'orangered' : index === 2 ? 'orange' : 'rgb(196, 195, 195)'}">
  • background-repeat 属性:背景图片 - 设置定位于不平铺
  • background-repeat: no-repeat
  • background-position: 设置背景图片的起始地位
  • background-origin: background-Origin属性指定background-position属性应该是绝对地位
  • background-size: background-size 属性指定背景图片大小
  • 语法: background-size: length(长度)|percentage(百分比)|cover(笼罩)|contain(蕴含)