-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

您可以将主页图标作为链接而不是列表项的背景图像。至少当我在 chrome 开发人员工具中尝试它时，这对我有用；）所以而不是

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 回答