HTML元素溢出中的图像
Ran*_*lue 34 html css browser scroll google-chrome
Chrome和其他浏览器的元素过度滚动(也称为弹性滚动或橡皮筋滚动)html.(见这里或这里.)
我想在html过度滚动中将图像作为复活节彩蛋,有点像iOS复活节彩蛋的Slack.(请参阅屏幕截图中的"您是最新的.".)
CSS
html {
background: green;
}
给溢出一种颜色.图像不起作用:
html {
background: url(image.png);
}
如何在html溢出中放置图像？
Eve*_*tss 12
您可以在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有背景颜色隐藏复活节彩蛋.
在这里你可以看到效果(在桌面上它仅适用于Safari).
- 恭喜你在Safari上获取它! (4认同)
有一个跨浏览器的触摸友好的解决方案,每一个前端开发人员应该知道:iScroll利玛窦斯皮内利(http://cubiq.org/iscroll-5).
他创建了一个橡皮筋效果的跨浏览器模拟,完全可以设置样式.iScroll可用于此目的(以及许多其他用途).我个人主要使用它来在移动设备上创建div溢出,因为它们通常是不被允许的.
这是一个老式的复活节彩蛋,使用背景图片#wrapper:http://codepen.io/anon/pen/OXMmgr ... JIPPY .... JIPPY JIPPY JIPPY!
PS.如果你想要的东西,在"常规"滚轮滚动的作品,试试这个回购:https://github.com/ftlabs/ftscroller
- 好的,用鼠标就可以了!但是,我希望过度滚动只能使用触控板和双指滑动. (2认同)