继承元素背景的逆梯度答案

【问题标题】：Inheriting the inverse gradient of the elements background继承元素背景的逆梯度
【发布时间】：2013-10-12 19:17:24
【问题描述】：

目标：给定一个具有背景渐变的 div/菜单，我希望菜单中的列表项采用与背景渐变相反的悬停样式。我的意思不是直接在悬停项目后面的背景的反转，而是背景渐变的反转部分，好像整个背景渐变已经旋转了 180 度并且悬停渐变继承了这个反转背景渐变的部分就在它的正下方。

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

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

【问题讨论】：

标签： css

【解决方案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

【讨论】：