スマートフォンサイトで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で背景をグラデーションにしたまま、異なるアイコンをつける方法があったら教えて下さい。
よろしくお願いします。
No.1
4974
2154
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 を、カンマで区切っていることに注意
14
10
1
2
コメント（0件)