为什么图标在重复？

Question

我尝试在菜单栏中使用图标作为项目，但当显示大于1366x768时，它开始重复。这是图片的样子：

这是html＆amp;的CSS：

＆＃13;

＆＃13;

.topheader__menu {
  float: right;
  font-size: 5vh;
  font-weight: bold;
  color: rgb(255, 255, 255);
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  margin-left: 3vmin;
  margin-right: 3vmin;
  font-family: Arial;
}
.topheader__menu a {
  text-decoration: none;
}
.topheader__menu__item {
  float: left;
  margin-left: 2ch;
  margin-right: 2ch;
}
.nav_1 {
  background: url(../img/nav-menu/home_bl.png);
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}
.nav_1:hover {
  background: url(../img/nav-menu/home_wh.png);
}

＆＃13;

<div class="topheader__menu">
  <a class="topheader__menu__item nav_1" href="#">&nbsp</a>
  <a class="topheader__menu__item nav_2" id="current" href="#">About</a>
  <a class="topheader__menu__item nav_3" href="#">Technical</a>
  <a class="topheader__menu__item nav_4" href="#">Products</a>
</div>

＆＃13;

＆＃13;

＆＃13;

如果显示大于1366x768，我应该如何不重复？

Answer 1

替换此代码的css宽度

.nav_1 {
  background:url(../img/nav-menu/home_bl.png);
  display: block;
  width: 16px;   //image width 
  height: 16px;  //image height
  background-repeat: no-repeat;
}
.nav_1:hover {
  background:url(../img/nav-menu/home_wh.png);
  width: 16px;  //image width 
  height: 16px;  //image height
}

Answer 2

而不仅仅使用post使用background并将background-image添加到悬停状态 像这样

background-repeat:no-repeat

Answer 3

放在下面的代码

.nav_1 {
background: url(../img/nav-menu/home_bl.png) no-repeat;
display: block;
width: 100%;}

.nav_1:hover {
background: url(../img/nav-menu/home_wh.png) no-repeat;
}

或

.nav_1 {
background: url(../img/nav-menu/home_bl.png);
background-repeat:no-repeat;
display: block;
width: 100%;}

   .nav_1:hover {
background: url(../img/nav-menu/home_wh.png);
background-repeat:no-repeat;
}