0

テクスチャ付きの背景、グラデーション、および左に配置されたアイコンを備えたボタンを作成したいと考えています。これは私が持っているコードですが、背景のグラデーションが表示されていません。

background:#B1D521;
background-image: url(../images/icon-heart.png), url(../images/bg-tile.png), linear-gradient(bottom, rgb(152,185,32) 42%, rgb(177,213,33) 71%);
background-image: url(../images/icon-heart.png), url(../images/bg-tile.png), -o-linear-gradient(bottom, rgb(152,185,32) 42%, rgb(177,213,33) 71%);
background-image: url(../images/icon-heart.png), url(../images/bg-tile.png), -moz-linear-gradient(bottom, rgb(152,185,32) 42%, rgb(177,213,33) 71%);
background-image: url(../images/icon-heart.png), url(../images/bg-tile.png), -webkit-linear-gradient(bottom, rgb(152,185,32) 42%, rgb(177,213,33) 71%);
background-image: url(../images/icon-heart.png), url(../images/bg-tile.png), -ms-linear-gradient(bottom, rgb(152,185,32) 42%, rgb(177,213,33) 71%);
background-repeat:no-repeat, repeat;
background-position:10% center;
4

1 に答える 1

1

私は最終的に答えを思いついた。これは回避策ですが、ボタンの内側に同じ幅と高さのスパンを追加し、透明に設定してから、ボタンの上にカーソルを置くと、ボタンの不透明度の遷移を行います。このようにして、複数の背景とグラデーションを使用してトランジションを偽造できます。

http://jsfiddle.net/gBDAy/

于 2012-07-12T15:02:03.367 に答える