-1

こんにちは私のサイトのウェブサイト（パスワード：ebriff）で私はアクティブなリンクに写真として小さな白い三角形を追加しました。しかし、私は最初のメニューリンクとして写真を持っているので、それに追加されません。これを回避するにはどうすればよいですか？

CSS：

.top-menu li{
    margin: 0;
    float: left;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    color: #fff; /* text color */
    font-size: 15px;
    text-shadow: 0 1px 0 rgba(0,0,1,.5); /* drop shadow */
    letter-spacing: 1px;
    font-weight: 300;
  } 

li.top {
    border-right: 1px solid #007472;
    border-left: 1px solid #009C9A;
}

li.top:last-child {
    border-right: none;
}

li.top:first-child {
    width: 70px;
    border-left: none;
    background: url({{'home-icon.png'|asset_url}}) no-repeat 24px 25px;
    text-indent: -9999px;
}

.current {
    background: url({{'triangle.png'|asset_url}}) no-repeat center bottom}
}
4

2 に答える 2

2

リスト項目の代わりにホーム アイコンをリンクの背景画像として配置できます。少なくとも、クロム開発者ツールで試したとき、これはうまくいきました;）だから代わりに

li.top:first-child {
  width: 70px;
  border-left: none;
  background: url({{'home-icon.png'|asset_url}}) no-repeat 24px 25px;
  text-indent: -9999px;
}

使用する

li.top:first-child {
  width: 70px;
  border-left: none;
  text-indent: -9999px;
}
li.top:first-child a{
  background: url({{'home-icon.png'|asset_url}}) no-repeat 24px 25px;
}
于 2013-03-20T22:25:23.553 に答える
1

CSS3 の複数の背景を使用できます

background: url(...), url(...);

または、「通常の背景アイコン」の上に矢印を重ねた画像を手動で作成し、それを :active セレクターに使用することもできます。CSS スプライトの使用も検討してください。

複数の背景: http://www.css3.info/preview/multiple-backgrounds/

于 2013-03-20T22:18:24.653 に答える