阴影贴在网站的两侧

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内容div大于浏览器窗口大小时,阴影会停留在窗口的右侧而不是页面的右侧.当我把它放到时auto,问题又回来了.

此外,当页面缩小时,阴影以内容的结尾结束.

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

Answer 1

我建议在CSS中创建阴影而不是像这个小提琴中的图像:

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

有关解决特定实现的帮助,请提供说明问题的实时站点或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的#left,并且#right是你的影子资产的宽度.- 制作#left,#right和#center所有直接的孩子#wrapper