人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

スマートフォンサイト作成時の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で背景をグラデーションにしたまま、異なるアイコンをつける方法があったら教えて下さい。

よろしくお願いします。

●質問者: kamefactory
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3

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 を、カンマで区切っていることに注意

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ