Html 使用CSS将透明边框转换为隐藏背景

我用了一个链接来展示我的想法，但基本上我希望在整个网站下有一个隐藏的背景，当链接悬停在上面时，有一些链接通过一个透明的边框来显示这个背景。我不知道如何隐藏背景，但在悬停时仍能在边框中显示它

这是我到目前为止得到的

正文{
背景图像：url（“http://img05.deviantart.net/7fa2/i/2015/185/2/1/neon_rainbow_stripes_by_wolfy9r9r-d8zv7ba.png");
背景重复：重复；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
}
李{
浮动：左；
}
李阿{
显示：块；
颜色：#666；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
李娜：停下来{
颜色：#222；
边框底部：1px实心透明；
}
.覆盖{
位置：固定；
宽度：100%；
身高：100%；
左：0；
排名：0；
背景：#FFF；
z指数：10；
}
.内容{
位置：相对位置；
z指数：15；
}

导航1

导航2

导航3

导航4

像这样的东西

还是只在底部显示图像

---

这是你想要的东西吗。让我知道你的看法

正文{
背景图像：url（“http://img05.deviantart.net/7fa2/i/2015/185/2/1/neon_rainbow_stripes_by_wolfy9r9r-d8zv7ba.png");
背景重复：重复；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
}
李{
浮动：左；
}
李阿{
显示：块；
颜色：#666；
文本对齐：居中；
填充：10px 16px；
文字装饰：无；
}
李娜：停下来{
颜色：#222；
边框底部：10px实心透明；
背景图像：线性渐变（透明，透明），url（“http://img05.deviantart.net/7fa2/i/2015/185/2/1/neon_rainbow_stripes_by_wolfy9r9r-d8zv7ba.png");
背景剪辑：内容框、填充框；
}
.覆盖{
位置：固定；
宽度：100%；
身高：100%；
左：0；
排名：0；
背景：#FFF；
z指数：10；
}
.内容{
位置：相对位置；
z指数：15；
}

导航1
导航2
导航3
导航4

你是说？

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