第一种：（自己写的）

@mixin bg-image($url,$type){
  [data-dpr="1"] & {
    background: url("/static/loginPicture/" + $url + ".png") no-repeat center center; 
  }
  [data-dpr="2"] & {
    background: url("/static/loginPicture/" + $url + "@2x.png") no-repeat center center;         
  }
  @if $type == 2{
    [data-dpr="3"] & {
      background: url("/static/loginPicture/" + $url + "@2x.png") no-repeat center center;        
    }
  }@else{
    [data-dpr="3"] & {
      background: url("/static/loginPicture/" + $url + "@3x.png") no-repeat center center;        
    } 
  }
}

第二种：（网上搜的）

@mixin bg-image($url){
    background: url("/static/loginPicture/" + $url + ".png") no-repeat center center;
    @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
      background: url("/static/loginPicture/" + $url + "@2x.png") no-repeat center center;
    }
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
      background: url("/static/loginPicture/" + $url + "@3x.png") no-repeat center center;
    }
}