阴影坚持到现场的两侧

我愿把阴影到我的网站的两边，你可以在这里看到 - 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; }

问题是，当内容div的width比浏览器窗口大小越大，阴影撑粘在窗口的右侧，而不是页面的右侧。当我把它放到auto时，问题又出现了。

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

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

来源

2012-01-06 michaliv

是否需要'浮动'？如果你删除它们会发生什么？看起来你有两种适当的机制来适当地定位阴影（全宽与背景对齐和浮点）。请包括HTML。 – cheeken 2012-01-06 20:16:50

我会建议在创建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更改为影子资产的宽度。 - 制作#left,#right,#center#wrapper

来源

2012-01-06 20:15:22

+1对于没有图像:) – danferth 2012-01-06 20:21:33

Thx，这是一个很好的解决方案。不过，我想找到一个没有CSS3的解决方案。该网站还没有生活，我上传了第一个测试版本 - http://www.oztrik.sk/test/ – michaliv 2012-01-06 20:30:28

'box-shadow' [主要渲染引擎完全支持]（http：// en。 wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)#Properties），因此删除了供应商前缀。但是，如果您想使用图片，请参阅我的编辑以获取可能的解决方案。 – 2012-01-06 20:41:09

阴影坚持到现场的两侧

回答

相关问题