css - 继承元素背景的逆梯度

Question

目标：给定一个具有背景渐变的 div/menu，我希望菜单中的列表项采用与背景渐变相反的悬停样式。我的意思不是直接在悬停项目后面的背景的反转，而是背景渐变的反转部分，好像整个背景渐变已经旋转了 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 本身。为了使背景显示正确的部分，我需要逐个元素设置背景位置。

但是，至少它有效：

小提琴