阴影贴在网站的两侧

Question

我想在网站的两侧添加阴影，如您所见 - http://www.oztrik.sk/wp-content/uploads/2012/01/trik.jpg

我想把它们放在左右divs width:100%;和height:auto;作为背景图片，repeat-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; }

问题是当内容width的{​​{1}}大于浏览器窗口大小时，阴影会停留在窗口的右侧而不是页面的右侧。当我把它放到div时，问题又回来了。

此外，当页面缩小时，阴影会以内容的结尾结束。

任何想法如何解决？ 谢谢！

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属性。   - 您还应将width的{​​{1}}和#left更改为影子资产的宽度。   - #right

的所有直接子女#left，#right和#center