同时使用background-attachment:fixed; 和 background-size:cover;时背景图大小被切割的解决方法

最新推荐文章于 2024-03-11 19:43:05 发布

英邦网络

最新推荐文章于 2024-03-11 19:43:05 发布

阅读量3.3k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/yingbangwang/article/details/68068099

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

想要的效果：网站banner图片，在往下拉滚动条的时候，希望保持不动，下面的内容从它上面盖过去。

<div id="front-index-banner">
	<div class="bd">
		<ul>
			<li style="background-image:url('/lib/dist/images/front/banner.jpg')">
			<div class="bannercon">
				<div class="bannertip">
					<div class="wow">
						<img src="/lib/dist/images/front/banner_tip.png" />
					</div>
				</div>
			</div>
			</li>
			<li style="background-image:url('/lib/dist/images/front/banner.jpg');position:relative;">
				<a href="<{link app=site ctl=single act=article args=array(8)}>" style="display:block;position:absolute;left:50%;top:0;margin-left:-610px;width:1220px;height:677px;"></a>
			</li>
		</ul>
	</div>
	<div class="hd">
		<ul></ul>
	</div>
</div>

我使用的是SuperSlide切换效果。css和js文件如下：

$("#front-index-banner").slide({titCell:".hd ul",mainCell:".bd ul",effect:"fold",delayTime:1000,interTime:5000,trigger:"mouseover",autoPage:true,autoPlay:true});

#front-index-banner { width: 100%; height:677px; overflow: hidden;  position:relative;}
#front-index-banner .bd { width: 100%; overflow: hidden;}
#front-index-banner .bd li { float: left; width: 100%; height: 677px; background-position: center 0; background-repeat: no-repeat;background-attachment: scroll;background-size:cover;}
#front-index-banner .bd li .bannercon { text-align: center; padding-top: 240px;  position:relative;}
#front-index-banner .bd li .bannertip{ text-align:center; position:absolute;left:50%;margin-left:-420px;width:840px;top:261px;}
#front-index-banner .hd ul { position: absolute; width: 100px; left: 50%; bottom: 24px; margin-left: -50px;}
#front-index-banner .hd ul li { float: left; margin-right: 8px; width: 12px; height:12px; line-height: 12px; background-color: #fff; text-indent: -9999px; overflow: hidden; border-radius: 50%; cursor: pointer;}
#front-index-banner .hd ul li.on { background-color: #a02200;}

注意加粗部分，如果这里使用 background-attachment: fixed;background-size:cover; 是可以达到效果的，但是图片会被裁减。

所以修改为

background-attachment: scroll;background-size:cover;

然后加上下面的JS代码即可实现同样的效果，而且图片显示正常。

$(window).scroll(function() {
  var scrolledY = $(window).scrollTop();
  $('#front-index-banner .bd li').css('background-position', 'left ' + ((scrolledY)) + 'px');
});