隐藏背景与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> 

有任何想法吗？

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

或者您是否只想将图像显示在边框底部？

工作小提琴

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>