css - 在菜单之间添加标题图像

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 {