css - 背景画像と線形グラデーション

Question

右上に背景画像を配置し、残りの部分に背景色を使用したdivがありますが、色の代わりに線形グラデーションを使用することはできますか？

Answer 1

はい、可能です。次のスタイル定義を使用できます。

background-image: url(/images/mybg.png) top right, linear-gradient(top, #444444, #999999);

また、クロスブラウザ互換のソリューションについては、この投稿を参照してください。

Answer 2

グラデーションビットマップを作成し、薄いスライスを切り取って背景画像として使用することもできます。下に、左から右にブレンドするよりも薄い水平方向の画像があり、垂直方向に繰り返されます。

style="width: 110px; background-image: url(BlendLeft.ico);
                background-repeat: repeat-y;