html - 阴影粘在网站的两侧

Question

我想在我的网站两侧添加阴影，您可以在此处看到 - http://www.oztrik.sk/wp-content/uploads/2012/01/trik.jpg

我想将它们放入左右 div 中，以 width:100%; 和 height:auto; 作为背景图片，重复-y。

#left { background:url('../img/shadow_left.png') left center repeat-y; width:100%;     height:auto; float:left; }
#right { background:url('../img/shadow_right.png') right center repeat-y; width:100%; height:auto; float:right; }

问题是当内容 div 的 width 大于浏览器窗口大小时，阴影停留在窗口的右侧而不是页面右侧。当我将它设置为 auto 时，问题又反过来了。

此外，当页面缩小时，阴影会随着内容的结束而结束。

有什么解决办法吗？谢谢!

Answer 1

我建议在 CSS 中创建阴影而不是使用图像 like in this Fiddle :

body {
    box-shadow: inset 100px 0 100px -100px #000,
                inset -100px 0 100px -100px #000;
}

如需帮助解决您的具体实现问题，请提供实时站点或 a jsFiddle这说明了问题。

编辑

要使您的实现工作正常，请尝试以下操作:

#left {
    background: url('../img/shadow_left.png') left center repeat-y;
    left: 0;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100px;
    z-index: -1;
}
#right {
    background: url('../img/shadow_right.png') right center repeat-y;
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    width: 100px;
    z-index: -1;
}
#center {
    position: relative;
    z-index: 1;
}

注意事项: - 要正确呈现 z-index，元素必须具有已声明的 position 属性。 - 您还应该将 #left 和 #right 的 width 更改为影子 Assets 的宽度。 - 使 #left、#right 和 #center 都是 #wrapper

的直接子级