使用CSS将透明边框变为隐藏背景

Question

我已经制作了一个JSFiddle来尝试展示我的想法，但基本上我想在整个网站下面有一个隐藏的背景，并且当链接被悬停时，通过透明边框显示这个背景。我无法弄清如何隐藏背景并仍能在悬停期间在边框中显示它。

以下是我目前所拥有的。

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;
}

<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>

任何想法？

- Saja

---

你是指border-image吗？ - Mr_Green

Answer 1

像这样吗？

演示代码

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;
}

您是想仅在边框下方显示图像吗？

演示链接

- Mr_Green

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>

- Abhishek T.