提一个bug 关于存在@media后 生成的background-position属性并没有放到应该放到的@media里 导致图片只显示后者属性

[w2230030100]

比如我有如下代码

.bacpic(@w,@h,@url){
  width: @w;
  height: @h;
  background: url(@url) no-repeat;
}

header{
  @header-h:40px;

  @logo-w:178px;
  @logo-h:34px;
  @logo-url:"../images/j-t-logo.png?__sprite";
  @logo-ml:12px;
  @logo-mt:7px;

  @phone-mr:15px;

  height: @header-h;

  .logo{
    .bacpic(@logo-w,@logo-h,@logo-url);
    margin-left: @logo-ml;
    margin-top: @logo-mt;
  }

  .phone{
    float: right;
    margin-right: @phone-mr;
    .ui-font(1.4rem,#00549d,@header-h);
  }

  @media @medium-up {
    height: 2*@header-h;

    .logo{
      .bacpic(2*@logo-w,2*@logo-h,"../images/[email protected]?__sprite");

      margin-left: 2*@logo-ml;
      margin-top: 2*@logo-mt;
    }
    .phone{
      margin-right: 2*@phone-mr;
    }
  }
}

当雪碧图处理之后

header {
  height: 40px;
}

header .logo {
  width: 178px;
  height: 34px;

  margin-left: 12px;
  margin-top: 7px;
  background-repeat: no-repeat;
}

header .phone {
  float: right;
  margin-right: 15px;
  font: normal 1.4rem/40px "Microsoft Yahei";
  color: #00549d;
}

@media only screen and (min-width: 641px) {
  header {
    height: 80px;
  }

  header .logo {
    width: 356px;
    height: 68px;

    margin-left: 24px;
    margin-top: 14px;
    background-repeat: no-repeat;
  }

  header .phone {
    margin-right: 30px;
  }
}
//这个位置的属性 start 这里被放到@media的外边了 且后者覆盖了前者的设置
header .logo {
  background-position: -178.5px 0px
}

header .logo {
  background-position: 0px -36px
}
//这个位置的属性 end
header .logo {
  background-size: 357px 105px;
  background-image: url(../images/common_0.5_z.png)
}

其中@media对屏幕自适应宽度的设置并没有被引用进来 导致屏幕变化后只应用logo后者的background-position设置

如果改成如下代码 显示则正常了

header {
  height: 40px;
}

header .logo {
  width: 178px;
  height: 34px;

  margin-left: 12px;
  margin-top: 7px;
  background-repeat: no-repeat;
}

header .phone {
  float: right;
  margin-right: 15px;
  font: normal 1.4rem/40px "Microsoft Yahei";
  color: #00549d;
}
////////如果是background-position在这里就正确了
header .logo {
  background-position: -178.5px 0px
}
@media only screen and (min-width: 641px) {
  header {
    height: 80px;
  }

  header .logo {
    width: 356px;
    height: 68px;

    margin-left: 24px;
    margin-top: 14px;
    background-repeat: no-repeat;
  }
 ////////如果是background-position在这里就正确了
  header .logo {
    background-position: 0px -36px
  }

  header .phone {
    margin-right: 30px;
  }
}




header .logo {
  background-size: 357px 105px;
  background-image: url(../images/common_0.5_z.png)
}

[w2230030100]

大神们都很忙 没人理我么😭

[oxUnd]

这个不好办，因为如果考虑 media 就得知道 css 执行的上下文，这会导致静态工具处理太复杂；当然可以再引入更多的一些 标识 来实现这类功能，后续调研看是否合适引入此类功能。

[mudoo]

@xiangshouding https://github.com/mudoo/fis-spriter-csssprites-group/commit/009a93de1962ca4dc798841e92a408ea3d2116a5 项目中要这样处理，所以根据processInline思路，将@media拆分大概实现了下，不晓得会不会有问题...后续有问题再来补充

[oxUnd]

@mudoo 其实 media 蛮复杂的一种情况，只能局部解决部分情况吧；我看要不要引入一个全面支持版本，以及保留一个性能版本。

[hxlniada]

请问这个bug怎么样了？现在我们是在retina屏幕下使用二倍图，那这样就不能跟雪碧图结合了啊，怎么搞

[hxlniada]

😭有没有大神帮解决这个问题啊。。。太需要了

[mudoo]

@hxlniada https://github.com/mudoo/fis-spriter-csssprites-group 目前自用，分media处理雪碧图，可能还有不完善的地方，你可以先试试看有没问题