Css 奇怪的行为-主体宽度改变，div变不透明

我有一个非常奇怪的问题，我的反应css。身体90%宽

如果水平分辨率低于1200px，我会将其更改为100%（使用媒体查询），但在低于1000px的分辨率下，它应该再次为100%

我的页面有两个居中的容器，左侧的另一个容器位于右侧容器的下方（后面有z索引），它有一个背景图像。两个容器都具有流体宽度

所以基本上当屏幕宽度低于某个点时，图像的左侧容器几乎不在右侧容器的下方。右边的容器有一个20px的余量，以便留出一些空间。这个20px的边距应该是透明的

这很好，但如果我在1000px和1200px之间缩放浏览器，右侧内容容器的边距将变得不透明，但它不应该。它应该是透明的，因为它的宽度更宽

我不知道这种行为从何而来，因为我没有在边缘改变任何东西

只需将浏览器缩放到1000px和1200px之间的宽度，您就会看到图像和内容之间的绿色间隙。（如果您将tahn 1200px再缩放一点，您会看到边距再次是透明的）

---

抱歉，有点难以解释

它并没有变得不透明

问题不在于右div与左div重叠。问题在于左div宽度

它是40%，一旦你的浏览器变得太窄，它就会开始小于图像

---

如果在左侧div中添加

minwidth:780px

，它将正常工作。而且因为它是固定的，而且z指数较低，所以你不必担心它的大小。

OMG你是多么的尴尬啊，我想这是一个以假乱真的完美例子。午餐时间到了……基本上，随着容器宽度的缩小，背景图像被剪裁。另一种解决方案是缩放背景以适应容器宽度。