HTML元素溢出图像
Chrome浏览器和其他浏览器对html元素有overscroll（也称为弹性滚动或橡皮筋滚动）。 （见这里或这里 ）
我想在html overscroll中将图像作为复活节彩蛋，有点像iOS复活节彩蛋的Slack 。 （请参阅屏幕截图中的“你是最新的”。）
CSS
html { background: green; }
给溢出一个颜色。 图像不起作用：
html { background: url(image.png); }
我怎样才能把一个图像在html溢出？
你可以在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.comhttp://img.dovov.comEasterEggThree.png"); background-repeat: no-repeat; background-size: 6%; background-attachment: fixed; background-position: 50% 10px; } .body-wrapper { background-color: white; }
你必须删除html元素的默认橡胶效果（因为你不能把graphics放在html父元素 – 没有一个html父母）。 body获得了橡胶效果和透明的背景 – 由于橡胶效果扩大了这种颜色，可以重叠复活节彩蛋graphics，缺乏背景是非常重要的。 .body-wrapper已经有了背景颜色来隐藏复活节彩蛋。
在这里你可以看到效果（在桌面上它只能在Safari上运行）。
有一个跨浏览器触摸友好的解决scheme，每个前端开发人员应该知道：Matteo Spinelli的iScroll（ http://cubiq.org/iscroll-5 ）。
他创build了一个跨浏览器模拟的橡皮筋效果，这是完全可塑的。 iScroll可以用于这个目的（以及许多其他的）。 我个人主要用它来创build移动设备上的div溢出，因为它们通常是不允许的。
这里是#wrapper上使用背景图像的老派复活节彩蛋： http ://codepen.io/anon/pen/OXMmgr … JIPPY …. JIPPY JIPPY JIPPY！
PS。 如果你想要一些在“常规”滚动滚动的工作，试试这个回购： https ： //github.com/ftlabs/ftscroller
试试这个，它可能会解决你的问题（y）
html { background: url(image.png); overflow: hidden; height: 100%; } body { height: 100%; overflow: auto; }
这可能工作，为我做的：
body { background: white; height: 100%; overflow: auto; } html { overflow: hidden; height: 100%; background: url("http://www.planwallpaper.com/statichttp://img.dovov.combackground-wallpapers-26.jpg"); }
你不需要手动创build它，因为有很多js插件已经在做这个工作。 这是我认为最好的图书馆是Overall.Js
这里是链接https://github.com/tholman/overscroll
我很确定，这是你正在寻找的。
我对Everettss的代码做了一些修改，以便它可以在所有的浏览器中运行。
我使用background-clip: content-box将背景颜色限制为内容本身，而不是影响填充。 这里是代码：
滚动顶部以查看图像
var body = document.querySelector('.body-wrapper'); body.addEventListener('scroll', function(e){ var scrollTop = this.scrollTop; if(scrollTop === 0){ this.style.paddingTop = "50px"; this.style.height = "calc(100% - 50px)"; setTimeout(function(){ this.style.paddingTop = "0px"; }.bind(this), 700); this.style.height = ""; } else{ this.style.paddingTop = "0px"; this.style.height = ""; } })
/* --- reset rubber effect on html --- */ html { overflow: hidden; height: 100%; } body { height: 100%; overflow: hidden; } /* ------------ end reset ------------ */ html { background-color: white; background-image: url("http://www.freebordersandclipart.comhttp://img.dovov.comEasterEggThree.png"); background-repeat: no-repeat; background-size: 6%; background-attachment: fixed; background-position: 50% 10px; } .body-wrapper { background-image: linear-gradient(white, white); background-clip: content-box; background-attachment: scroll; height: 100%; transition: padding .7s linear, height .7s linear; overflow: auto; }
<div class="body-wrapper"> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, architecto consectetur cupiditate deserunt dolor dolorem dolores in itaque modi odio, ratione suscipit voluptatem. Accusamus alias corporis debitis veniam vero voluptatem.</span><span>Eligendi in magni quod reiciendis rerum! Aut corporis nihil nostrum reiciendis saepe. Accusamus commodi dolores neque officia omnis pariatur sequi suscipit ullam veritatis! Ab, adipisci earum facere fuga temporibus voluptates?</span><span>Amet, doloremque, quo! Autem harum illo iusto. Blanditiis commodi, consectetur cupiditate delectus dolore, eveniet facere natus necessitatibus nemo numquam quidem reprehenderit repudiandae veniam. Aperiam dolores eaque ipsam quisquam reiciendis, vel.</span><span>A ab at atque blanditiis cupiditate eaque eligendi est fugit illo inventore laborum maiores minima molestiae nihil non quaerat, quam quasi qui rem rerum sint sit unde veniam vitae voluptatum!</span><span>Ad ea molestias perspiciatis repellat. Accusamus adipisci aliquid animi aspernatur doloremque ducimus et excepturi expedita facilis, id libero modi molestiae omnis quibusdam quisquam, repellat sequi similique veniam vero voluptatibus voluptatum.</span><span>Alias aliquid amet aspernatur blanditiis culpa cumque dolorum earum eligendi et explicabo illum ipsa iure labore minima natus nemo optio, possimus, praesentium quam quibusdam quisquam quos sunt suscipit unde velit?</span><span>Cumque earum facilis ipsa odio officiis reiciendis tenetur. Aliquid debitis dolor facere fugit, incidunt, ipsa ipsum nemo nihil nisi omnis optio perspiciatis, quisquam repellat sapiente similique temporibus ut veritatis voluptas?</span><span>Architecto, labore, nostrum! Aliquam aliquid animi cumque ea eaque eveniet ipsa iste laudantium magni maiores molestias mollitia nemo nulla obcaecati, omnis optio placeat porro possimus ratione rem vel, voluptate voluptates.</span><span>Ad aperiam architecto asperiores assumenda aut beatae consequuntur corporis delectus deleniti dolor doloremque eius eos eum exercitationem harum iusto molestias nesciunt nulla omnis, praesentium quam quas quidem quisquam soluta, veniam!</span><span>Atque blanditiis debitis error est expedita minima molestias nam officia veniam, voluptates. A ipsum mollitia quibusdam rerum tempora. Cum deleniti fugit itaque maiores minima nisi obcaecati possimus quidem sit voluptatem.</span> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, architecto consectetur cupiditate deserunt dolor dolorem dolores in itaque modi odio, ratione suscipit voluptatem. Accusamus alias corporis debitis veniam vero voluptatem.</span><span>Eligendi in magni quod reiciendis rerum! Aut corporis nihil nostrum reiciendis saepe. Accusamus commodi dolores neque officia omnis pariatur sequi suscipit ullam veritatis! Ab, adipisci earum facere fuga temporibus voluptates?</span><span>Amet, doloremque, quo! Autem harum illo iusto. Blanditiis commodi, consectetur cupiditate delectus dolore, eveniet facere natus necessitatibus nemo numquam quidem reprehenderit repudiandae veniam. Aperiam dolores eaque ipsam quisquam reiciendis, vel.</span><span>A ab at atque blanditiis cupiditate eaque eligendi est fugit illo inventore laborum maiores minima molestiae nihil non quaerat, quam quasi qui rem rerum sint sit unde veniam vitae voluptatum!</span><span>Ad ea molestias perspiciatis repellat. Accusamus adipisci aliquid animi aspernatur doloremque ducimus et excepturi expedita facilis, id libero modi molestiae omnis quibusdam quisquam, repellat sequi similique veniam vero voluptatibus voluptatum.</span><span>Alias aliquid amet aspernatur blanditiis culpa cumque dolorum earum eligendi et explicabo illum ipsa iure labore minima natus nemo optio, possimus, praesentium quam quibusdam quisquam quos sunt suscipit unde velit?</span><span>Cumque earum facilis ipsa odio officiis reiciendis tenetur. Aliquid debitis dolor facere fugit, incidunt, ipsa ipsum nemo nihil nisi omnis optio perspiciatis, quisquam repellat sapiente similique temporibus ut veritatis voluptas?</span><span>Architecto, labore, nostrum! Aliquam aliquid animi cumque ea eaque eveniet ipsa iste laudantium magni maiores molestias mollitia nemo nulla obcaecati, omnis optio placeat porro possimus ratione rem vel, voluptate voluptates.</span><span>Ad aperiam architecto asperiores assumenda aut beatae consequuntur corporis delectus deleniti dolor doloremque eius eos eum exercitationem harum iusto molestias nesciunt nulla omnis, praesentium quam quas quidem quisquam soluta, veniam!</span><span>Atque blanditiis debitis error est expedita minima molestias nam officia veniam, voluptates. A ipsum mollitia quibusdam rerum tempora. Cum deleniti fugit itaque maiores minima nisi obcaecati possimus quidem sit voluptatem.</span> </div>
也许你应该试试这个：
html { background-color: 'yourcolor'; } html { background-image: 'your image'; }
因为当你使用background property时，你正在覆盖你之前写的东西。 它将为所有background properties提供一个默认值 。 这将是一个简单的方法来分别设置你的background-image和background-color ， 但对于其他行为，如repeat ， position ， attachment etc ，请留下评论，所以我想知道你还有什么问题。
第二部分
我已经为你制作了这支笔 ， – > http://codepen.io/CodeHero/pen/PzZdZW好吧，我在那里build立一个盒子，并给它一些;background property并使用background : blue;覆盖所有的background : blue; 。
这是一个简单的示例，但您可以通过执行以下步骤来确定。 您可以右键单击蓝色框，然后selectinspect element 选项 ，它会打开一个检查菜单，您可以看到右侧的css部分，如果仔细观察，可以看到它跨过一条线在第一个css selector property ，这是因为我用background而不是background-color 。
你根本不需要修改你的HTML。 只需在页面下面放置一个伪元素即可。
body { height: 3000px; position: relative; overflow: visible; } body::after { display: block; background-image: url(//getuikit.com/docshttp://img.dovov.complaceholder_200x100.svg); /* Placeholder image */ position: absolute; top: 100%; left: 50%; /* Centers image horizontally */ margin-left: -100px; /* Half the width */ width: 200px; /* Any width you need */ height: 100px; /* Any height you need */ }
body { height: 3000px; position: relative; overflow: visible; } body::after { display: block; background-image: url(//placeholdit.imgix.net/~text?txtsize=19&bg=000080&txtclr=ccccff&txt=200×100&w=200&h=100); /* Placeholder image */ position: absolute; top: 100%; left: 50%; /* Centers image horizontally */ margin-left: -100px; /* Half the width */ width: 200px; /* Any width you need */ height: 100px; /* Any height you need */ }
<html> <body> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacinia elit augue, quis congue velit lacinia eget. Curabitur nec congue nunc. Sed sit amet molestie mauris. Duis in urna imperdiet, placerat purus a, rutrum nulla. Morbi congue ante a iaculis fermentum. Integer ornare consequat risus, sed venenatis est sodales quis. Sed finibus nulla velit, nec varius ex aliquet ac. Nulla enim lectus, euismod nec mi in, pretium sollicitudin nibh. Nunc ex leo, congue ac elit eu, dapibus fermentum dolor. Fusce sit amet viverra orci, et pharetra purus. In gravida, leo et consequat tristique, arcu arcu suscipit justo, at suscipit libero leo vitae massa. In tincidunt condimentum odio non pharetra. Morbi sit amet purus vel nibh feugiat tincidunt. Phasellus commodo libero non arcu dictum, ut consectetur dolor dictum. Maecenas rutrum dolor ac rhoncus imperdiet. Vivamus in augue eu ante vehicula ornare quis et erat. Nullam nec aliquet nulla. Suspendisse non turpis in orci blandit viverra. Morbi hendrerit, odio ut efficitur ultricies, orci nisi pretium tellus, a rutrum turpis felis a mi. Sed pellentesque blandit mauris, nec tristique ipsum rhoncus ullamcorper. Mauris efficitur feugiat dignissim. Aenean faucibus erat ut commodo malesuada. Curabitur tempor diam vitae hendrerit tincidunt. Morbi sit amet augue turpis. Aenean nec egestas sem. Quisque lacinia semper magna, id consequat augue eleifend id. Phasellus tincidunt euismod dui, id vestibulum lorem eleifend et. Integer hendrerit turpis sed ante vulputate, non malesuada neque consectetur. Cras dui felis, posuere ac risus non, tincidunt molestie sem. Duis consectetur ultricies enim, eu lacinia metus rhoncus a. Quisque accumsan porta lectus sit amet tempor. In imperdiet dapibus risus et placerat. Etiam pretium magna urna, quis egestas mauris tincidunt non. Mauris egestas vel augue vitae interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vel odio orci. Duis quis magna ante. Suspendisse a eros et lacus dignissim lobortis quis nec mi. Pellentesque non egestas metus, vel efficitur nisi. Phasellus a nunc in eros tristique commodo sit amet nec dolor. Donec blandit magna sit amet mauris dictum congue. Fusce tempus, turpis non congue pulvinar, risus dui mattis metus, eget malesuada ex lectus non nibh. In finibus lacus eu sem accumsan, viverra pharetra justo euismod. Morbi mollis molestie felis quis elementum. Proin eget eros nec felis faucibus ullamcorper. Curabitur dapibus augue sed leo blandit, sit amet tempus lorem imperdiet. Suspendisse pellentesque sapien vitae velit bibendum, eget fringilla urna suscipit. Praesent in tellus quis arcu porta lobortis. Sed nulla metus, sodales eget iaculis eget, facilisis sit amet nulla. Mauris sagittis metus quis lectus dictum accumsan. Donec consectetur dui eget enim suscipit, ac porttitor urna ultrices. Phasellus tempor pharetra magna, sit amet malesuada lectus rutrum ultricies. Nam imperdiet vestibulum diam, a ullamcorper purus volutpat nec. Aenean pharetra ullamcorper suscipit. Donec molestie lobortis facilisis. Vivamus laoreet dapibus placerat. Duis luctus ligula felis, vitae eleifend turpis maximus a. Aliquam fringilla elit maximus diam sagittis volutpat. Vestibulum erat magna, commodo a tortor vel, efficitur aliquet ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus iaculis hendrerit mollis. Vestibulum vitae ante vel velit ultricies efficitur. Duis tincidunt semper consectetur. <h1>Keep scrolling down!</h1> </body> </html>
