☰

背景画像と CSS3 グラデーションを同じ要素に組み合わせるにはどうすればいいですか? 質問する

tag-icon • tag-icon css background-image gradient
背景画像と CSS3 グラデーションを同じ要素に組み合わせるにはどうすればいいですか? 質問する

background-colorCSS3 グラデーションを使用してから、 を適用してbackground-image何らかの明るい透明テクスチャを適用するにはどうすればよいですか?

ベストアンサー1

背景は複数あります！

body {
  background: #eb01a5;
  background-image: url("IMAGE_URL"); /* fallback */
  background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */
}

これら 2 行は、グラデーションを実行しないブラウザのフォールバックです。IE < 9 のみで画像をスタックする場合の注意事項については、以下を参照してください。

  • 1 行目はフラットな背景色を設定します。
  • 2 行目は背景画像のフォールバックを設定します。

最後の行では、背景画像とグラデーションを処理できるブラウザ用に設定します。

  • 3 行目は、比較的新しいすべてのブラウザ用です。

現在ほとんどのブラウザは複数の背景画像とCSS背景をサポートしています。http://caniuse.com/#feat=css-gradientsブラウザのサポートについては、複数のブラウザプレフィックスが必要ない理由に関する良い投稿を参照してください。http://codepen.io/thebabydino/full/pjxVWp/

レイヤースタック

最初に定義された画像がスタックの最上位になることに注意してください。この場合、画像はグラデーションの最上位にあります。

背景レイヤーの詳細については、http://www.w3.org/TR/css3-background/#レイヤーリング。

画像の積み重ねのみ（宣言にグラデーションなし）IE < 9の場合

IE9 以降では、同じ方法で画像を積み重ねることができます。これを使用して IE9 用のグラデーション画像を作成することもできますが、個人的にはそうしません。ただし、画像のみを使用する場合は、IE < 9 ではフォールバック ステートメントが無視され、画像が表示されません。グラデーションが含まれている場合は、この現象は発生しません。この場合、単一のフォールバック画像を使用するには、Paul Irish のすばらしい画像を使用することをお勧めします。条件付き HTML 要素フォールバックコードと一緒に:

.lte9 #target{ background-image: url("IMAGE_URL"); }

背景の位置、サイズなど

単一の画像に適用されるその他のプロパティも、コンマで区切って指定できます。値が 1 つだけ指定されている場合、その値はグラデーションを含むすべてのスタックされた画像に適用されます。 は、background-size: 40px;画像とグラデーションの両方を 40 ピクセルの高さと幅に制限します。ただし、 を使用すると、background-size: 40px, cover;画像は 40 ピクセルになり、グラデーションが要素を覆います。 1 つの画像にのみ設定を適用するには、もう一方のデフォルトを設定します。background-position: 50%, 0 0;または対応ブラウザ使用initial：background-position: 50%, initial;

背景のショートカットを使用することもできますが、これによりフォールバックの色と画像が削除されます。

body{
    background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}

同じことが、background-position、background-repeat などにも当てはまります。

おすすめ記事