Question

我正在努力解决在他们的div之外溢出的背景图片中的不一致行为。

我使用负边距和正填充来实现此目的。

<!DOCTYPE html >
<html><head>
<style type="text/css">
body {
width: 1100px; margin: 0 auto; padding: 0; background-color: #FFFFFF;   
}
body:before, body:after {
height: 100%; width: calc((100% - 1100px)/2); background: rgba(188,188,188,0.29); z-index: 100; position: fixed; top: 0; content: "";
}
body:before {
float: left; left: 0;
}
body:after {
float: right; right: 0;
}
.fallleft, .fallright {
height: 390px;  width: 390px;  overflow:visible; background-image: url(picture.jpg);
}
.fallleft {
margin-left: -241px;
padding-left: 241px;
float: left;
}
.fallright {
margin-right: -241px;
padding-right: 241px;
float: right;
}
</style>
</head>
<body>
<div class="fallleft"></div>
<div class="fallright"></div>
</body>
</html>

使用的图像是531x390px

在大多数情况下，这就是我想要的。页面有灰色边缘，图像溢出超出主边界的宽度1100px。

当我们使窗口变窄时，问题在于行为，在1100和1580px之间。

此时，在左侧，背景图像溢出到零线的左侧，因此从屏幕上消失。我喜欢这种行为。

但是在右边，匹配的CSS会创建额外的画布宽度（至少在Firefox中会这样做），因此页面可以水平滚动。当水平滚动时，整个边界效果都会被破坏。

如何在右侧实现相同的行为，因此多余的背景会在浏览器边缘消失，而不会创建新的页面宽度？

Answer 1

根据您的评论，media queries可能适合解决您的问题：

@media screen and (min-width: 1100px){
    yourselector{
        overflow-x:hidden;
    }
}

只要屏幕宽度超过1100像素，这就会隐藏水平滚动条。

溢出的背景图像的左/右行为不同

1 个答案: