我正在努力解决溢出到 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
在大多数情况下，这符合我的要求。该页面有灰色边缘，图像超出主要 1100 像素宽度，位于边框下方。
当我们将窗口缩小到 1100 到 1580 像素之间时，问题出在行为上。
此时，在左侧，背景图像溢出到零线的左侧，因此从屏幕上消失了。我喜欢这种行为。
但是在右侧，匹配的 CSS 会创建额外的 Canvas 宽度(至少在 Firefox 中是这样)，因此页面可以水平滚动。并且当水平滚动时，整个边框效果都被破坏了。
如何在右侧实现相同的行为，使多余的背景在浏览器边缘下简单地消失，而不创建新的页面宽度？
最佳答案
根据您的评论，媒体查询 可能适合解决您的问题:
@media screen and (min-width: 1100px){
yourselector{
overflow-x:hidden;
}
}
只要您的屏幕宽度超过 1100 像素，这就会隐藏水平滚动条。
关于css - 溢出背景图像的不同左/右行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23239307/