0

这是我的第一篇文章！

我有以下需求：

  • 具有背景图像纹理和径向渐变的多层背景
  • <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 的大小而不影响它上面的层（在这种情况下是径向渐变）？

参考

4

1 回答 1

1

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

@include hidpi {
  @include background(
    radial-gradient($warmRadialGradient, top right),
    image-url($darkTextureHiDpi)
  );
  background-size: auto auto, 200px 200px; // $darkTextureHiDpi is 400x400px
}
于 2013-05-01T16:43:30.957 回答