Css 页面内容在调整为小尺寸时会失真

我在以下位置放置了一个宽背景图像：。现在，当我通过减小宽度来调整浏览器的大小时，右边的边栏与漂亮的背景混合在一起

我想要的是，bg图像的重叠部分将被隐藏，边栏将被定位在该部分上，每当大小减小时，这样它就不会在较小的屏幕上看起来完全混淆

有什么想法吗？

为什么你的图像不是HTML？

---

您可以只应用

最大宽度：100%到它。
你可以简单地把背景颜色设置为：白色.sidebar

上的CSS中选择code>。它必须调整一点，但它会解决您最初的问题

---

这里的问题是边栏实际上没有背景…

您的边栏可以使用坚实的背景，因此

div#右侧边栏{背景：白色；}

编辑

您还可以添加内联样式，该样式仅影响主页：

---

你是什么意思？把bg图像放在drupal站点上，我不想修改核心代码。还有其他想法吗？请看我在@AgA上面的编辑。只要把它添加到主页上，你就会没事了。是的，它起作用了。我很好奇为什么！另外，你能告诉我这是否会影响网站中的任何其他页面吗？@AgA，在你添加代码之前，

div

是透明的，所以看起来好像中间的图片是重叠的。这种风格的改变只是使背景成为纯色，因此图片无法“显示”。如果您将代码添加到CSS文件中，它将使站点上每个带有

id

的右侧边栏都具有纯白背景，但这应该没问题。检查一下。如果它弄乱了另一个页面，请从CSS中删除样式并将其添加到主页，如我在第二个示例中所示。谢谢。这是因为bg图像的z索引低于侧边栏吗？因此，侧边栏的不透明白色背景在调整大小时将显示在图像顶部？谢谢，你能看到我上面的评论吗？？你不必“修补核心代码”。如果您根本无法应用任何CSS，这将是一项困难的任务。你有什么编辑东西的选项和工具？在你的问题上你不说。现在发生的事情没有代码问题——你只是在侧边栏上没有一个bagground，你总是能够看到它背后的东西。你必须设置一个背景或放一个更大的边距，这样边栏就永远不会超过其他任何东西。你的解决方案是正确的，谢谢！我已经编辑了css文件，很抱歉造成混淆。你和Jason一样正确，我也可以同样选择你的答案：）