Chrome 和其他浏览器为 html 元素提供了过度滚动(也称为 flex 滚动或橡皮筋滚动)。 (参见 here 或 here 。)
我想要 html 中的图像作为复活节彩蛋过度滚动，有点像 Slack iOS 复活节彩蛋。 (请参阅屏幕截图中的“您是最新的。”。)
CSS
html {
background: green;
}
给溢出一个颜色。图片无效:
html {
background: url(image.png);
}
如何将图像放入 html overflow 中？
最佳答案
您可以在 Safari 上获得此结果(我在其他浏览器上没能做到这一点)。
HTML
<html>
<body>
<div class="body-wrapper">
Content goes here
</div>
</body>
</html>
CSS
/* --- Reset rubber effect on the 'html' tag --- */
html {
overflow: hidden;
height: 100%;
}
body {
height: 100%;
overflow: auto;
}
/* ------------ end reset ------------ */
html {
background-color: white;
background-image: url("http://www.freebordersandclipart.com/images/EasterEggThree.png");
background-repeat: no-repeat;
background-size: 6%;
background-attachment: fixed;
background-position: 50% 10px;
}
.body-wrapper {
background-color: white;
}
您必须删除 html 元素上的默认橡胶效果(因为您不能将图形放在 html 父元素上 - 没有 html 父)。
body 具有橡胶效果和透明背景 - 缺少背景很重要，因为橡胶效果会扩展这种颜色并且可以与复活节彩蛋图形重叠。 .body-wrapper 有背景颜色来隐藏复活节彩蛋。
Here你可以看到效果(在桌面上它只适用于 Safari)。
关于html - HTML 元素溢出中的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37228829/