可以在 Mac 上超出页面的 CSS 样式窗口背景吗？答案

【问题标题】：CSS Style window background beyond page on Mac possible?可以在 Mac 上超出页面的 CSS 样式窗口背景吗？
【发布时间】：2014-04-24 00:53:46
【问题描述】：

是否可以为浏览器的窗格背景设置样式或颜色？
在 Mac 上的 Chrome 和 Safari 中滚动超出边缘时，
整个页面被拉了一点点和/或横向。

它显示了一个基本的画布风格的纹理，
是否可以设置该区域的样式（使用 CSS）？

编辑：我找到了一种（粗略的）方法来完全防止过度滚动，
但我正在寻找一种方法来设置颜色或纹理，以匹配整体设计。
Prevent "overscrolling" of web page

【问题讨论】：

这有帮助吗？ apple.stackexchange.com/a/47125
这是相当永久的，哈哈。我希望为网站找到一种解决方案，能够将其设置为与整体设计相匹配的颜色或纹理。
好吧，我不是MAC用户，但我认为这与浏览器本身有关，在这种情况下是Safari。如果我错了，请纠正我。

标签： css macos browser

【解决方案1】：

设置正文颜色body {background-color: white} 应该可以工作。

更复杂，如果您需要更改过度滚动颜色，同时保持主体颜色为白色（仅在 iOS10.3 Safari 上测试）。我使用 1x1 白色像素做了以下操作：

body {
    background-color: rgba(0, 0, 0, 0.4);
    background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==);
    background-size: 100% 100%;
}

仅供参考 1：我尝试过但对我不起作用的其他三件事是：outline: 100px solid rgba(0, 0, 0, 0.4);、box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.4); 和 background: #FFF, rgba(0, 0, 0, 0.4);。

仅供参考 2：我记得真正旧版本的 Safari 需要在 html 元素上设置颜色。

【讨论】：

【解决方案2】：

可能不再需要这样做，但也许其他人也想做同样的事情：D

这应该在任何 ios 设备的过度滚动区域上放置一个背景颜色

body:after {
    content: '';
    position: fixed;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    z-index: -1;
    background: #000000;
}

here 是我的要点的链接

【讨论】：

在我的简短（桌面）测试中：Safari 仍需要此功能。然而，Chrome 可以在 body 上设置 background-color。 Firefox 似乎更聪明一点，并且使用当前前面的任何背景。（上述 Safari 或 Chrome 方法都不适用于 Firefox。）

【解决方案3】：

很遗憾，这是不可能的。这是应用程序 (Safari) 的一部分，不能使用网页设置样式。

【讨论】：

过度滚动区域现在与 Safari 和 Chrome 中的正文背景颜色相同。