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

Question

这是我的第一篇文章！

我有以下需求：

• 具有背景图像纹理和径向渐变的多层背景
• 将应用到的<section> 具有 100% 的宽度和取决于内容的高度
• 我想要一个媒体查询，为 iPhone >=4 等高 dpi 屏幕提供更高 dpi 的图像。我使用 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 混合：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
}