0

私はクラスを持っています、それはこのように見えます:

.blueButton {
    some css goes here
}

ここで「ボタン」を使用するために、次のHTMLコードを使用します。

<a href="..." class="blueButton">link text</a> 

これは私のボタンを表示します、私が欠けている唯一のものはリンクテキストの右側の背景画像です。私は試した:

background: url('image url') no-repeat top right;

しかし、画像は表示されませんでした...これは正しい方法ですか?これはそのフィドルです:http://jsfiddle.net/bSDYG/

ありがとう!

4

4 に答える 4

2

画像とグラデーションの両方を背景にする場合は、次の構文を使用します。

background: url(image-url), linear-gradient(...);

つまり、複数の背景を指定するには、それらの定義をコンマで区切ります。

于 2012-09-28T10:07:51.007 に答える
0

背景を2回設定します。初めて、画像として。次に、グラデーションとして。前回のみ適用されます。

ボタンの横に画像を表示するには、アンカー内に2つの別個の要素(たとえば、2つのスパン)を配置する必要があります。

于 2012-09-28T10:08:47.697 に答える
0

このデモをお試しください

background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #98bff0), color-stop(1, #5e8dc6) );
background:-moz-linear-gradient( center top, #98bff0 5%, #5e8dc6 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#98bff0', endColorstr='#5e8dc6');
background: url('http://t1.gstatic.com/images?q=tbn:ANd9GcTjBC-ecGBr9x-QZ5Y7luNjiCNz3VuH1K7GeVu-rwabtLz_6QkrKVsUXfg') no-repeat center right;
background-color:#98bff0;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:12px;
font-weight:bold;
padding:6px 8px;
text-decoration:none;
于 2012-09-28T10:15:01.790 に答える
-1

同じ要素に複数のバックグラウンドを適用することはできません。

最善の策は、リンクにスパンを追加して背景を与えることです。

于 2012-09-28T10:07:30.987 に答える