0

入力ボタンに使用しているCSSクラスの下。
ボタンに矢印の付いたグラデーションが必要です。

.addBtn{border:1px solid #B9770C;color:#000000;
background: url('../../images/arrow_right.png') no-repeat center bottom; 
/* fallback */
background: url('../../images/arrow_right.png') no-repeat center bottom, -webkit-gradient(linear, left top, left bottom, from(#f9d295), to(#f1a32b)); /* Saf4+, Chrome */
background: url('../../images/arrow_right.png') no-repeat center bottom, -webkit-linear-gradient(top, #f9d295, #f1a32b); /* Chrome 10+, Saf5.1+ */
background: url('../../images/arrow_right.png') no-repeat center bottom,    -moz-linear-gradient(top, #f9d295, #f1a32b); /* FF3.6+ */
background: url('../../images/arrow_right.png') no-repeat center bottom,     -ms-linear-gradient(top, #f9d295, #f1a32b); /* IE10 */
background: url('../../images/arrow_right.png') no-repeat center bottom,      -o-linear-gradient(top, #f9d295, #f1a32b); /* Opera 11.10+ */
background: url('../../images/arrow_right.png') no-repeat center bottom,         linear-gradient(top, #f9d295, #f9d295); /* W3C */
}
.addBtn:hover{          
border: 1px solid #B9770C;              
background: url('../../images/arrow_right.png') no-repeat center bottom; /* fallback */
background: url('../../images/arrow_right.png') no-repeat center bottom, -webkit-gradient(linear, left top, left bottom, from(#f1a32b), to(#f9d295)); /* Saf4+, Chrome */
background: url('../../images/arrow_right.png') no-repeat center bottom, -webkit-linear-gradient(top, #f1a32b, #f9d295); /* Chrome 10+, Saf5.1+ */
background: url('../../images/arrow_right.png') no-repeat center bottom,    -moz-linear-gradient(top, #f1a32b, #f9d295); /* FF3.6+ */
background: url('../../images/arrow_right.png') no-repeat center bottom,     -ms-linear-gradient(top, #f1a32b, #f9d295); /* IE10 */
background: url('../../images/arrow_right.png') no-repeat center bottom,      -o-linear-gradient(top, #f1a32b, #f9d295); /* Opera 11.10+ */
background: url('../../images/arrow_right.png') no-repeat center bottom,         linear-gradient(top, #f1a32b, #f9d295); /* W3C */
}

IE9のスクリーンショット。 [追加] ボタンと [削除] ボタンを確認してください


この URL は、IE およびその他のブラウザーで確認できます。 http://jsfiddle.net/aEK4j/

4

1 に答える 1

0

このサイトを使用して、すべてのグラデーションを取得してください。これは IE(6-9) のすべてのバージョンで役に立ちます!

高度なカラフルグッズ

于 2012-11-14T13:08:28.027 に答える