Question

假设您有一个网站，其中主体的背景颜色为红色，而内容区域的白色背景为1,000像素宽。现在假设你想要在内容区域和红色背景的交界处最黑暗的内容区域上投影，并且当它从左侧的左侧和右侧的右侧偏离时变得不那么透明。它基本上是这样的：

sideways shadow

所以我的策略是让身体的背景颜色变红，只抓住Photoshop中的阴影，宽度为~47像素，高度为1像素。我的问题是：

如何将其插入我的网站，以便浏览器的水平滚动条仅在达到1,000像素时显示，而不是在达到1,000 + 47 + 47时（内容区域的宽度加上宽度）两个阴影）。

我确信这是一个常见的问题，但我真的很鄙视这些事情。

谢谢！

修改：抱歉缺少代码。这通常不是我的风格。所以我们走了：

HTML ：

<div id="mainwrapper">
    <div id="left_shadow"></div>
    <div id="right_shadow"></div>
</div>

CSS ：

#mainwrapper {
    width:1000px;
    height:100%;
    margin-left:auto;
    margin-right:auto;
    background-color:#e8e8e8;
    position:relative;
}
#left_shadow {
    position:absolute;
    top:0;
    bottom:0;
    left:-47px;
    width:47px;
    background:url(/images/leftshadow.png) repeat-y;
}
#right_shadow {
    position:absolute;
    top:0;
    bottom:0;
    right:-47px;
    width:47px;
    background:url(/images/rightshadow.png) repeat-y;
}

使用此设置，如果我将浏览器窗口缩小到1,095像素，则它没有水平滚动条。如果我将它缩小到1,094px，它有一个水平滚动条，因为它识别那些绝对定位的阴影作为内容区域的一部分。我的问题是：我如何制作它以便滚动条仅在它到达灰色中心时显示（1,000px）？再次感谢，伙计们。

Answer 1


<html>
<body style="background:url(bg.jpg) red repeat-y center top">
    <div align="center" width="100%" background="bg.jpg">
        <div style="width:870px;align:center;background:silver" align="center">test</div>
    </div>
<body>
</html>

下面的图片很小，所以你需要仔细观察：）

Sample Image

Answer 2

内容区域可以是904px宽（1000-47-47）吗？：P害怕我需要一些代码来帮助描述你所说的......

Answer 3

请参阅此answer我的意外副本：Technique for using a wide background div without affecting body width。与@ Leigh相似，但可能更清洁。

创建一个位于内容区域之外的div，但在浏览器窗口缩小时不会导致水平滚动条出现

3 个答案: