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のみ画像を重ねる場合の注意点をご覧ください。
最後の行では、背景画像とグラデーションを扱えるブラウザ用に設定しています。
現在のほぼすべてのブラウザは、複数の背景画像や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用のグラデーション画像を作ることもできますが、個人的にはそうは思いません。ただし、画像のみを使用した場合、IE9ではフォールバックステートメントを無視して画像を表示しませんのでご注意ください。これはグラデーションが含まれている場合には起こりません。この場合、単一のフォールバック画像を使用するには、Paul Irish'氏の素晴らしいConditional HTML elementをフォールバックコードと一緒に使用することをお勧めします。
.lte9 #target{ background-image: url("IMAGE_URL"); }
背景の位置、サイズなど。
1枚の画像に適用されるその他のプロパティもコンマで区切って指定できます。値を1つだけ指定した場合は、グラデーションを含むすべてのスタック画像に適用されます。background-size: 40px;は、画像とグラデーションの両方の高さと幅を40pxに制限します。しかし、
background-size: 40px, cover;を使用すると、画像は40px、グラデーションは要素を覆うようになります。一方の画像にだけ設定を適用するには、もう一方の画像にデフォルトを設定します。
background-position:50%, 0 0;または、[対応しているブラウザ](http://caniuse.com/#feat=css-initial-value)では、
initialを使用します:
background-position:50%, initial;`
backgroundの省略形を使用することもできますが、この場合はフォールバックカラーとイメージが削除されます。
body{
background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}
background-positionやbackground-repeatなども同様です。
最初に定義された背景画像は、スタックの一番上にあることを覚えておいてください。最後に定義された画像は一番下になります。つまり、画像の後ろに背景のグラデーションをつけるには、次のものが必要になります。
body {
background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), linear-gradient(red, yellow);
background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -moz-linear-gradient(top, red, yellow);
}
また、画像の背景位置や背景サイズを定義することもできます。 CSS3 gradients]1でできる面白いことをブログ記事にまとめました。
私も同じことをしようとしていました。背景色と背景画像はオブジェクトの中で別のレイヤーに存在していて、つまり共存できるのですが、CSSのグラデーションは背景画像のレイヤーを利用しているようです。
私の知る限り、border-imageは複数の背景よりも広くサポートされているようなので、もしかしたら別のアプローチがあるかもしれません。
http://articles.sitepoint.com/article/css3-border-images
UPDATE: もう少し調べてみました。Petra Gregorova氏はここで何か動いているようです --> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html