假设您有一个网站,其中主体的背景颜色为红色,内容区域的白色背景为1,000像素宽.现在假设你想要在内容区域和红色背景的交界处最黑暗的内容区域上投影,并且当它从左侧的左侧和右侧的右侧偏离时变得不那么透明.它基本上看起来像这样：
所以我的策略是让身体的背景颜色变红,只抓住Photoshop中的阴影,宽度约为47px,高度为1px.我的问题是：
如何将其插入我的网站,以便浏览器的水平滚动条仅在达到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)？伙计们,再次感谢
解决方法
<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>
下面的图片很小,所以你需要仔细看:)