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

Question

我正在尝试在网页上实现菜单设计，但我被卡住了。

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

这是一张显示我的意思的图片：

以下是限制因素：

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

• 元素数量可以改变

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

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

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

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

编辑：我们可以修改设计以将未选择的菜单项保持为白色，然后在菜单元素完成后启动白色到灰色渐变。但我无法看到这样做的方法，因为柱子的高度可能不同。

Answer 1

当你为整个ul设置背景时，你不能再为单个ul透明。因此，您需要将其应用于每个li，并将background-attachment设置为fixed：

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

我制作了一个JSFiddle，显示了这个实现：

http://jsfiddle.net/kLD98/1/

请查看li.space，这还不完美。也许其他人有想法解决这个问题，因为我猜测渐变效果已经很好了。

附录：请查看@Bergis评论及其附带的JSFiddle（http://jsfiddle.net/kLD98/9/），其中需要使用li.space。

Answer 2

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

Answer 3

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

来自Apple developer page。

Answer 4

这是一篇关于CSS

的css渐变的精彩文章

http://css-tricks.com/css3-gradients/