我正在为一个网站设计新的布局,我非常接近实现我想要的结果。但是,存在一个问题。我正在使用此处描述的技术的改编版(http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/demo/backgrounds.html,请参阅 gorilla 下方的 3 列示例)。基本上,我的版本使用绝对定位的 CSS 伪元素作为左栏的背景。
当我尝试将 box-shadow
应用于伪元素时,我的问题出现了。该元素及其阴影始终出现在我的主栏顶部。
为了让所有这些都更清楚,我在这里创建了一个简单的示例页面:http://www.3strandsmarketing.com/test4.html
我担心的是,由于我使用的是基于主列父级的伪元素,它永远无法位于主列之下,但我希望有某种方法可以解决这个问题。有什么想法吗?
最佳答案
好的,这里的解决方案是不对主列使用半透明 (rgba) 颜色。否则,您将能够通过它看到侧边栏列的阴影,破坏一个在另一个之上的效果。
要查看正确的效果,请访问示例页面,并使用 Firebug 或其他 DOM 操作工具更改 #main-content
div 的背景颜色 rgba(0, 100 , 0, 0.2)
到 rgba(0, 100, 0, 1)
。您现在应该看到它确实位于左侧栏的“顶部”。
关于html - Unruly CSS 伪元素框阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7521780/