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再次反转，我将其背景大小设置为零（隐藏它）。

不太优雅的部分来自于李本身。为了使背景显示的正确部分，我需要按元素设置背景位置。

但是，至少它有效：

继承元素背景的逆梯度

1 个答案:

fiddle