html - Unruly CSS 伪元素框阴影

Question

我正在为一个网站设计新的布局，我非常接近实现我想要的结果。但是，存在一个问题。我正在使用此处描述的技术的改编版(http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/demo/backgrounds.html，请参阅 gorilla 下方的 3 列示例)。基本上，我的版本使用绝对定位的 CSS 伪元素作为左栏的背景。

当我尝试将 box-shadow 应用于伪元素时，我的问题出现了。该元素及其阴影始终出现在我的主栏顶部。

为了让所有这些都更清楚，我在这里创建了一个简单的示例页面:http://www.3strandsmarketing.com/test4.html

我担心的是，由于我使用的是基于主列父级的伪元素，它永远无法位于主列之下，但我希望有某种方法可以解决这个问题。有什么想法吗？

Answer 1

好的，这里的解决方案是不对主列使用半透明 (rgba) 颜色。否则，您将能够通过它看到侧边栏列的阴影，破坏一个在另一个之上的效果。

要查看正确的效果，请访问示例页面，并使用 Firebug 或其他 DOM 操作工具更改 #main-content div 的背景颜色 rgba(0, 100 , 0, 0.2) 到 rgba(0, 100, 0, 1)。您现在应该看到它确实位于左侧栏的“顶部”。