[解決済み] 同じ要素にbackground-imageとCSS3グラデーションを組み合わせるにはどうすればよいですか？

質問

CSS3 グラデーションの使い方 background-color を適用し、さらに background-image を使えば、軽い透明なテクスチャーのようなものが適用されるのでは？

解決方法は？

背景が複数ある

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/#layering .

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

IE9以降も同じように画像を重ねることができます。IE9でグラデーション画像を作成する場合にも使えますが、個人的には使わない方がいいと思います。ただし、画像のみを使用する場合、IE < 9はfallbackステートメントを無視して、画像を表示しないので注意が必要です。グラデーションが含まれている場合は、このようなことは起こりません。この場合、1つのフォールバック画像を使うには、Paul Irishの素晴らしい 条件付きHTML要素 をフォールバック・コードと一緒に使用します。

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

背景の位置、大きさなど

1枚の画像に適用される他のプロパティもカンマで区切ることができます。値を1つだけ指定した場合は、グラデーションを含むすべてのスタック画像に適用されます。 background-size: 40px; は、画像とグラデーションの両方の縦横を40pxに拘束します。しかし background-size: 40px, cover; にすると、画像は40pxになり、グラデーションは要素を覆うようになります。片方の画像にだけ設定を適用するには、もう片方の画像にデフォルトを設定します。 background-position: 50%, 0 0; または 対応ブラウザ 使用 initial : background-position: 50%, initial;

backgroundという略語を使うこともできますが、この場合、フォールバックカラーと画像は削除されます。

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

background-position、background-repeat等も同様です。