在菜单之间添加标题图像

Question

我正在尝试在菜单之间添加标题图像，但不知道为什么它没有显示。我不确定可能是我在 href 上放置渐变颜色的原因，这就是为什么标题图像位于渐变后面的原因。任何人都可以帮助在链接之间显示标题图像的最佳方式吗？

/** Header Menu **/
.logo_middle {
  padding-top: 100px;
}
.header_menu {
  margin-top: -41px;
}
* {
  margin: 0;
  padding: 0;
}
.menu li {
  list-style: none;
  background: url(../icons/header_div_image.png);
  background-repeat: no-repeat;
  background-position: right;
}
.menu li a {
  display: block;
  float: left;
  width: 20%;
  padding: 10px;
  text-align: center;
  font-family: 'Oswald', Helvetida Neue, sans-serif;
  font-weight: 300;
  font-size: 25px;
  letter-spacing: 1px;
  color: #ededed;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .25);
  background: #000000;
  /* Old Browsers */
  background: -webkit-linear-gradient(top, #575656, #000000);
  /*Safari 5.1-6*/
  background: -o-linear-gradient(top, #575656, #000000);
  /*Opera 11.1-12*/
  background: -moz-linear-gradient(top, #575656, #000000);
  /*Fx 3.6-15*/
  background: linear-gradient(to bottom, #575656, #000000);
  /*Standard*/
}
.menu li a.active,
a:active,
a:focus,
a:hover {
  color: #fff;
}
.menu {
  border-radius: 10px;
  overflow: hidden;
  border: 3px solid #f1c779;
}
.menu li a:hover {
  text-decoration: none;
  box-shadow: inset 0 0 220px 0 #070707;
  margin: 0px 0 0 0;
  transition: .25s;
  -webkit-transition: all ease 0.8s;
  -moz-transition: all ease 0.8s;
  transition: all ease 0.8s;
}
.menu h5 {
  margin-top: 0px;
  margin-bottom: 0px;
}
.icon1 {
  height: 83px;
  background-image: url(../icons/icon1.png);
  background-position: 47px 0;
  background-repeat: no-repeat;
  display: block;
}
.icon2 {
  height: 83px;
  background-image: url(../icons/icon2.png);
  background-position: 53px 0;
  background-repeat: no-repeat;
  display: block;
}
/** Header Menu Close **/

<div class="container header_menu hidden-xs hidden-sm">
  <div class="col-lg-12">
    <ul class="menu">
      <li>
        <a href="/">
          <h5><span class="icon1"></span></h5>CASINO</a>
      </li>
      <li>
        <a href="/slots">
          <h5><span class="icon2"></span></h5>SLOTS</a>
      </li>
    </ul>
  </div>
</div>

Answer 1

/** Header Menu **/
.logo_middle {
  padding-top: 100px;
}
.header_menu {
  margin-top: -41px;
}
* {
  margin: 0;
  padding: 0;
}
.menu li {
  list-style: none;
  background: url(../icons/header_div_image.png);
  background-repeat: no-repeat;
  background-position: right;
}
.menu li a {
  display: block;
  float: left;
  width: 20%;
  padding: 10px;
  text-align: center;
  font-family: 'Oswald', Helvetida Neue, sans-serif;
  font-weight: 300;
  font-size: 25px;
  letter-spacing: 1px;
  color: #ededed;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .25);
  background: #000000;
  /* Old Browsers */
  background: -webkit-linear-gradient(top, #575656, #000000);
  /*Safari 5.1-6*/
  background: -o-linear-gradient(top, #575656, #000000);
  /*Opera 11.1-12*/
  background: -moz-linear-gradient(top, #575656, #000000);
  /*Fx 3.6-15*/
  background: linear-gradient(to bottom, #575656, #000000);
  /*Standard*/
  border-right:3px solid #fff;
}
.menu li a.active,
a:active,
a:focus,
a:hover {
  color: #fff;
}
.menu {
  border-radius: 10px;
  overflow: hidden;
  border: 3px solid #f1c779;
}
.menu li a:hover {
  text-decoration: none;
  box-shadow: inset 0 0 220px 0 #070707;
  margin: 0px 0 0 0;
  transition: .25s;
  -webkit-transition: all ease 0.8s;
  -moz-transition: all ease 0.8s;
  transition: all ease 0.8s;
}
.menu h5 {
  margin-top: 0px;
  margin-bottom: 0px;
}
.icon1 {
  height: 83px;
  background-image: url(../icons/icon1.png);
  background-position: 47px 0;
  background-repeat: no-repeat;
  display: block;
}
.icon2 {
  height: 83px;
  background-image: url(../icons/icon2.png);
  background-position: 53px 0;
  background-repeat: no-repeat;
  display: block;
}
/** Header Menu Close **/

<div class="container header_menu hidden-xs hidden-sm">
  <div class="col-lg-12">
    <ul class="menu">
      <li>
        <a href="/">
          <h5><span class="icon1"></span></h5>CASINO</a>
      </li>
      <li>
        <a href="/slots">
          <h5><span class="icon2"></span></h5>SLOTS</a>
      </li>
    </ul>
  </div>
</div>

请在此规则上使用您的图像.menu li a {