Javascript 如何实现这种双梯度菜单设计？

我试图在网页上实现一个菜单设计，但我被卡住了

其概念是：有两个垂直列，一个菜单和一个内容容器。菜单的背景是从白色到灰色的线性渐变。内容的背景是从灰色到白色的线性背景。该菜单包含可变高度的导航列表。选择导航项时，它将采用与内容容器颜色混合的背景

这里有一张图片来说明我的意思：

以下是限制条件：

• 菜单中的某些元素可以展开或收缩。我不知道菜单的大小

• 元素的数量可以更改

• 但确切的渐变颜色不会改变

• 我不知道整个网页/内容区域的高度

• 未选择的菜单项不需要混合到导航容器的渐变中

单独使用CSS可以做到这一点吗？我研究了clip属性，但它涉及到我绝对定位元素和其中的文本，我不能这样做，因为我不知道会有多少。我想不出任何符合约束条件的东西

---

编辑：我们可以修改设计，使未选择的菜单项保持白色，然后在菜单元素完成后开始从白色到灰色的渐变。但是我看不出有什么方法可以做到这一点，因为列的高度可能会有所不同。

这是Chris关于css渐变的一篇精彩文章

---

我担心没有绝对测量是不可能的。如果元素上有背景，则不能为纯CSS的子元素在其上剪切透明孔。

将菜单项渐变设置为与主块相同的渐变样式，并向菜单项样式添加-Xpx的垂直偏移

---

由此可知。

当您为整个ul设置背景时，您无法使单个ul的背景再次透明。因此，您需要将其应用于每个li，并将

后台附件设置为
固定的
：

ul li{
   background: -webkit-linear-gradient(top, red 0%, blue 100%);
   background: -moz-linear-gradient(top, red 0%, blue 100%);
   background-attachment: fixed;
}

我制作了一个JSFIDLE，它显示了以下实现：


请看
li.space
，它还不完美。也许其他人有办法解决这个问题，因为我想梯度看起来已经很好了

附录：请看一下@Bergis comment和他附带的JSFIDLE（），它将使用
li.space
的需要放在一边。
这篇文章对这个问题有什么帮助？你试过了吗？它工作了，它已经试过看例子[link]，我对渐变语法没有任何问题。正是“混合”效果（列表元素获得其右侧的颜色）给我带来了麻烦。这是我的第一个想法，但未选择的菜单项需要与导航容器的其余部分混合。哎呀，我没有看到（也没有读到）这一点。在我的屏幕上几乎看不到白灰色，你可以在示例中加强这一点。我希望我能带着另一个答案回来…@Edit-这正是我所担心的。我可能最终会使用JS来实现这个效果，并优雅地将非JS浏览器降级为纯白色的左列。你的页面已经有DOM结构了吗？是的。当前页面将菜单实现为ul。但是这究竟是如何工作的呢？我不知道一个元素的垂直位置，所以我不能确定任何特定元素的渐变开始和结束的颜色。但是，他怎么知道垂直偏移-没有绝对定位，在纯CSS中？不在纯CSS中，不-我没有看到这个要求。要么显式定义菜单项高度（不适用于可扩展元素和bleugh），要么编写一些javascript。我能想象的唯一解决方案是将内容区域的
overflow
设置为
auto
，这样您就不必滚动背景。如果这不是你想要的，那么我的方法可能不适合你的需要。不，我错了，这是有效的解决方案。即使内容比视口大，并且我滚动，背景看起来也不会“粘住”。至于li.space，我通过在ul中添加overflow:hidden来修复它。啊，刚刚发现，因为ul是绝对定位的，所以它不能强制主元素扩展。因此，我将无法使用它。真遗憾。尽管如此，这仍然是我概述的需求的正确解决方案，因此我仍然将其标记为“已接受”。@JimmyBreck McKye:absolute仅用于将其设置为左列，您可以使用自己的方法。@YMMD:li.space可以使用“：：after”完成。然而，在另一方面，一些小的改进（不是设置为透明，而是设置为不同的渐变）也可以在没有li的情况下工作。空间：