2

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

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

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

在此处输入图像描述

以下是约束：

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

  • 元素的数量可以改变

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

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

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

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

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

4

4 回答 4

4

当你为整个 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放在一边。

于 2012-05-15T11:08:57.397 回答
0

我担心没有绝对测量是不可能的。在元素上有背景，您不能在其中为具有纯 CSS 的子元素切割一个透明的洞。

于 2012-05-15T10:36:10.983 回答
0

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

来自这个Apple 开发者页面。

于 2012-05-15T11:02:53.670 回答
-1

这是 Chris 撰写的一篇关于 CSS 渐变的精彩文章

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

于 2012-05-15T10:35:07.150 回答