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

すべての背景プロパティは、短縮形だけでなく、リストを受け入れます。最初の画像はサイズ変更すべきではなく、2 番目の画像はサイズ変更すべきであると仮定すると、次のようになります。

@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 に答える