css - 继承元素背景的反渐变

Question

目标:给定一个具有背景渐变的 div/菜单，我想让菜单中的列表项为其悬停样式采用背景渐变的倒数。这里我不是指悬停元素后面的背景的反转，而是背景渐变的反转部分，就好像整个背景渐变已经旋转 180 度，悬停渐变继承了这个反转背景渐变的部分就在它的正下方。

带有用于悬停的静态背景的基本示例。

http://plnkr.co/edit/d2HfMaCxLWUVBGtdhhXv?p=preview

Answer 1

我认为这是一个非常难的问题

我能找到的最佳解决方案:

.menu-back {
  background: linear-gradient(to bottom, lavender, gray);
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}

.menu-back ul {
  background: inherit;
  background-size: 0px 0px;
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}
.menu-back li:hover {
  background-image: inherit;
  background-origin: -100px 0px;
  background-position: 0px 0px;
  background-repeat: no-repeat;
  background-size: 100% 280px;
  background-origin: initial;
}
.menu-back a {
  font-size: 20px;
}

.menu-back li:nth-child(1) {
  background-position: 0px -12em;
}
.menu-back li:nth-child(2) {
  background-position: 0px -11em;
}
.menu-back li:nth-child(3) {
  background-position: 0px -9.5em;
}
.menu-back li:nth-child(4) {
  background-position: 0px -4.8em;
}
.menu-back li:nth-child(5) {
  background-position: 0px -2.4em;
}

在菜单中包含一个 scaleY(-1)，使他的背景在那里反转。

菜单中的 ul 再次反转，让一切看起来都正常。

为了让li可以继承菜单的背景，我需要制作继承链并在ul中也继承它。由于 ul 再次反转，我将其背景大小设置为零(以隐藏它)。

不太优雅的部分来自 li 本身。为了让背景显示正确的部分，我需要一个元素一个元素地设置背景位置。

但是，至少它是有效的:

fiddle