Css 制作一个位于内容区域之外但不'；t使水平滚动条在浏览器窗口收缩时出现_Css

Css 制作一个位于内容区域之外但不'；t使水平滚动条在浏览器窗口收缩时出现

css

Css 制作一个位于内容区域之外但不'；t使水平滚动条在浏览器窗口收缩时出现,css,Css,假设你有一个网站，身体的背景颜色是红色，内容区域有1000像素宽的白色背景。现在让我们假设您希望在内容区域和红色背景的交界处有一个阴影，该阴影在内容区域和红色背景的交界处最暗，并且在左侧离开左侧，右侧离开右侧时变得不那么不透明。基本上是这样的：因此，我的策略是将身体的背景色变成红色，并在photoshop中只抓取阴影，宽度约为47px，高度为1px。我的问题是: 如何将其插入到我的网站中，使浏览器的水平滚动条仅在达到1000像素时显示，而不是在达到1000+47+47（内容区域的宽度加上两个

假设你有一个网站，身体的背景颜色是红色，内容区域有1000像素宽的白色背景。现在让我们假设您希望在内容区域和红色背景的交界处有一个阴影，该阴影在内容区域和红色背景的交界处最暗，并且在左侧离开左侧，右侧离开右侧时变得不那么不透明。基本上是这样的：

因此，我的策略是将身体的背景色变成红色，并在photoshop中只抓取阴影，宽度约为47px，高度为1px。我的问题是:

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

我相信这是一个常见的问题，但我真的很不擅长用这些词

谢谢

编辑：很抱歉缺少代码。那通常不是我的风格。现在我们开始：

HTML：

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

#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;
}

使用这种设置，如果我将浏览器窗口缩小到1095像素，它就没有水平滚动条。如果我把它缩小到1094px，它会有一个水平滚动条，因为它可以识别那些绝对定位的阴影作为内容区域的一部分。我的问题是：如何使滚动条只在到达灰色中心（1000像素）时显示？再次感谢各位。

内容区的宽度可以是904px（1000-47-47）？：P恐怕我需要一些代码来帮助描述您正在谈论的内容……



<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>


测试

下图很小，因此您需要仔细查看：）

请参见我的意外副本：。与@Leigh类似，但可能更干净。

很抱歉，史蒂夫。我不认为代码在这里会有多大的好处，但我会很快更新这篇文章，尝试一下我正在尝试做的事情。Leigh Shayler可能也有正确的想法，尽管不能扩展（只适用于

div

s和

jpg

一样宽），我添加了代码来向您展示我目前正在做的事情。你认为用1px高的图像创建一个1094px宽的图像，在左边和右边有47个PX阴影，中间没有什么（内容区域覆盖它）？我好像已经猜出来了！看看我对Leigh回答的评论，看看我做了什么。非常感谢您的帮助…为您的麻烦向上投票：-]刚刚注意到，它不会有正确的居中和向左的行为。嗯…很有趣。为了更好地描述这个问题，我编辑了我的帖子。使用此解决方案，我是否必须制作一张以身体背景为中心的1094x1px图像？这听起来似乎很管用，但这是最好的解决方案吗？我刚试过这个，效果很好。对于那些感兴趣的人，我将body元素的background属性设置为

background:#8b1c11 url（/images/long_shadow.png）repeat-y 50%0%其中long_shadow.png为1094x1px。50%在页面上居中，bam…滚动条仅以1000像素的速度显示。谢谢你，李！更新答案，使其具有正确的居中和基本背景颜色