隐藏背景与CSS的透明边框

Question

我把JSFiddle放在一起试图表明我在想什么，但基本上我想在整个网站下面隐藏一些背景并显示一些链接当它们盘旋时，这个背景通过透明边框。我无法弄清楚如何隐藏背景，并且仍然可以在悬停期间在边框中显示它。

这是我到目前为止所做的事情。

＆＃13;

＆＃13;

body {
  background-image: url("http://img05.deviantart.net/7fa2/i/2015/185/2/1/neon_rainbow_stripes_by_wolfy9r9r-d8zv7ba.png");
  background-repeat: repeat;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
}
li a {
  display: block;
  color: #666;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  color: #222;
  border-bottom: 1px solid transparent;
}
.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #FFF;
  z-index: 10;
}
.content {
  position: relative;
  z-index: 15;
}

＆＃13;

<div class='overlay'></div>
<div class='content'>
  <ul>
    <li><a>Nav 1</a>
    </li>
    <li><a>Nav 2</a>
    </li>
    <li><a>Nav 3</a>
    </li>
    <li><a>Nav 4</a>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

有什么想法吗？

Answer 1

这样的东西？

Fiddle

li a:hover {
  color: #222;
  border-bottom: 1px solid transparent;

  /* Added styles */
  background-image: linear-gradient(white, white), url("http://img05.deviantart.net/7fa2/i/2015/185/2/1/neon_rainbow_stripes_by_wolfy9r9r-d8zv7ba.png");
  background-clip: content-box, padding-box;
  background-attachment: fixed;
}

或者您想仅将图像显示在边框底部？

<强> Working Fiddle

Answer 2

这是你想要的东西吗？让我知道你的观点。

    body {
  background-image: url("http://img05.deviantart.net/7fa2/i/2015/185/2/1/neon_rainbow_stripes_by_wolfy9r9r-d8zv7ba.png");
  background-repeat: repeat;
}

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    li {
      float: left;
    }

    li a {
      display: block;
      color: #666;
      text-align: center;
      padding: 10px 16px;
      text-decoration: none;
    }

    li a:hover {
      color: #222;
      border-bottom: 10px solid transparent;
      background-image: linear-gradient(transparent, transparent), url("http://img05.deviantart.net/7fa2/i/2015/185/2/1/neon_rainbow_stripes_by_wolfy9r9r-d8zv7ba.png");
      background-clip: content-box, padding-box;
    }

    .overlay {
      position: fixed;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: #FFF;
      z-index: 10;
    }

    .content {
      position: relative;
      z-index: 15;
    }

<div class='overlay'></div>
<div class='content'>
  <ul>
    <li><a>Nav 1</a></li>
    <li><a>Nav 2</a></li>
    <li><a>Nav 3</a></li>
    <li><a>Nav 4</a></li>
  </ul>
</div>

另一个小提琴如下......仅限底部边框 -

body {
  background-image: url("http://img05.deviantart.net/7fa2/i/2015/185/2/1/neon_rainbow_stripes_by_wolfy9r9r-d8zv7ba.png");
  background-repeat: repeat;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a {
  display: block;
  color: #666;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
}

li a:hover {
  color: #222;
  border-bottom: 10px solid transparent;
    
 border-image: url(http://img05.deviantart.net/7fa2/i/2015/185/2/1/neon_rainbow_stripes_by_wolfy9r9r-d8zv7ba.png) 5% round;
  cursor:pointer;
}

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #FFF;
  z-index: 10;
}

.content {
  position: relative;
  z-index: 15;
}

<div class='overlay'></div>
<div class='content'>
  <ul>
    <li><a>Nav 1</a></li>
    <li><a>Nav 2</a></li>
    <li><a>Nav 3</a></li>
    <li><a>Nav 4</a></li>
  </ul>
</div>