Question

您好我的网站website（密码：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}
}

Answer 1

您可以将主页图标作为链接的背景图像而不是列表项。当我在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;
}

Answer 2

您可以使用CSS3多个背景

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

或者您可以手动创建一个图像，箭头覆盖在“普通背景图标”上，并将其用于：活动选择器。考虑使用CSS精灵。

在多个背景上：http://www.css3.info/preview/multiple-backgrounds/

添加样式到活动链接？

2 个答案: