スマートフォンサイト作成時のCSSの設定について質問です。


スマートフォンサイトで1つずつアイコンが異なるメニューを作成しています。

<ul>
<li><a href="#">エビ</a></li>
<li><a href="#">カニ</a></li>
<li><a href="#">サカナ</a></li>
</ul>

CSSのbackground-imageでそれぞれのメニュー背景にグラデーションを設置し、それぞれに異なるアイコンを設置したいのですがbackground-imageでグラーデーションを設定しているためかアイコンが出ません。

li a{
background-image: -webkit-gradient(linear, left top, left bottom, from(#E8E8E1),color-stop(20%,#F5F5F1),color-stop(80%,#FFFFFF),to(#FFFFFF));

}

li:first-child {
background-image: url(img~.png);
    background-repeat: no-repeat;
}

li:nth-child(2) {
background-image: url(img~.png);
background-repeat: no-repeat;
}

一つ一つにクラス指定すればできると思うんですが、CSSでできないものかと思っています。
ちなみに同じアイコンであれば表示させることはできます。

CSSで背景をグラデーションにしたまま、異なるアイコンをつける方法があったら教えて下さい。

よろしくお願いします。

回答の条件
  • 1人10回まで
  • 13歳以上
  • 登録:2013/04/25 12:43:54
  • 終了:2013/04/30 11:16:58

回答(1件)

id:a-kuma3 No.1

a-kuma3回答回数4367ベストアンサー獲得回数18032013/04/25 13:44:56

background-image ではなく、list-style で指定してみたらどうでしょうか?

li:first-child {
    list-style: url(ひとつめ.png);
}

li:nth-child(2) {
    list-style: url(ふたつめ.png);
}

画像があるところの背景にもグラデーション色を付けたいのであれば、-webkit-gradient の指定を、それぞれに書く必要があると思います。

li:first-child {
    background-image: url(ひとつめ.png), -webkit-gradient(linear, left top, left bottom, from(#E8E8E1),color-stop(20%,#F5F5F1),color-stop(80%,#FFFFFF),to(#FFFFFF));
    background-repeat: no-repeat;
}

li:nth-child(2) {
    background-image: url(ふたつめ.png), -webkit-gradient(linear, left top, left bottom, from(#E8E8E1),color-stop(20%,#F5F5F1),color-stop(80%,#FFFFFF),to(#FFFFFF));
    background-repeat: no-repeat;
}

※ url と -webkit-gradient を、カンマで区切っていることに注意

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません