Compass / SCSS：带有hidpi图像的多层背景图像

Question

这是我的第一篇文章！

我有以下需要：

• 具有背景图像纹理和径向渐变的多层背景
• 它将应用的<section>具有100％宽度和内容相关高度
• 我想要一个媒体查询，为高dpi屏幕提供更高的dpi图像，例如iPhone＆gt; = 4。我使用了Kaelig方便的SCSS mixin [1]来构建媒体查询。

到目前为止我的代码看起来有点像这样：

section.funky-background {
  @include background(
    radial-gradient($warmRadialGradient, top right),
    image-url($darkTexture)
  );
  @include hidpi {
    @include background(
      radial-gradient($warmRadialGradient, top right),
      image-url($darkTextureHiDpi)
  );
}

没有background-size属性，这只会以相同的较低分辨率显示较大的$ darkTextureHiDpi图像。但是，添加background-size属性会导致整个背景以指定的大小显示，从而以不希望的方式平铺。

新代码

@include hidpi {
  @include background(
    radial-gradient($warmRadialGradient, top right),
    image-url($darkTextureHiDpi)
  );
  background-size: 200px 200px; // $darkTextureHiDpi is 400x400px
}

我的问题：有没有办法定义背景图像png 的大小而影响它上面的图层（在这种情况下是径向渐变）？

参考

• [0]指南针图片/背景参考：http://compass-style.org/reference/compass/css3/images/
• [1] SCSS Compass Retina / HiDpi mixin：https://github.com/kaelig/hidpi

Answer 1

所有背景属性都接受列表，而不仅仅是速记。假设第一张图片不应该调整大小，而第二张图片应该调整，这就是它的样子：

@include hidpi {
  @include background(
    radial-gradient($warmRadialGradient, top right),
    image-url($darkTextureHiDpi)
  );
  background-size: auto auto, 200px 200px; // $darkTextureHiDpi is 400x400px
}