css - css背景画像にグラデーションを使用することは可能ですか?

Question

500px 幅の青い背景画像を持つ div を取得しようとしています。次に、divの左端でグラデーションを白くしようとしています。右に行くにつれて、背景画像がゆっくりと見えます

Answer 1

このCSSコードは、グラデーションにするのに役立ちます

.gradient {
    width: 200px;
    height: 200px;

    background: #999; /* for non-css3 browsers */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */ 
}

クラスを使用してhtmlで上記のcssを使用します

<div class="gradient">
    gradient box
</div>