我正在测试视差滚动效果,其中有一个背景图片,通过滚动,您可以看到图片的不同部分。问题是,当我缩小页面时,图片会重复,这很难看。我试着不再重复;它只让图片停留在一个角落,我试过背景尺寸:封面;这使得页面可以滚动到我不需要的一侧。
如何处理?
编辑:我很抱歉忘记张贴代码。
HTML&CSS:
.parallax {
background: url("http://s1.picswalls.com/wallpapers/2014/02/19/latest-space-wallpaper_110926700_30.jpg") center fixed;
}
.parallax-inner{
padding-top: 10%;
padding-bottom: 10%;
}
<section class="parallax">
<div class="parallax-inner">
<h2>My First Heading</h2>
</div>
</section>
示例:http://prntscr.com/9jv8d4
缩小:http://prntscr.com/9jv8sd
无重复;http://prntscr.com/9jv94p
封面和1920x1080屏幕,默认100%变焦;http://prntscr.com/9jv9ur(页面可滚动到最右侧)
尝试将您的css代码更改为如下:
body {
margin: 0;
}
.parallax {
background: url(latest-space-wallpaper_110926700_30.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.parallax-inner{
padding-top: 10%;
padding-bottom: 10%;
}
我自己测试过,效果很好,希望这能对你有所帮助。
资源将对您有用:https://css-tricks.com/perfect-full-page-background-image/
只需使用
body{
margin: 0;
padding:0;
}