本文编辑:小秋同学

CSS固定背景图片不跟随浏览器的滚动

小秋同学 08-20 08:33:37 学习园地
摘要: 看过很多博客、微博和QQ空间里面,很多人都给自己的小窝设置了固定背景,不随浏览器滚动,实现的方法除了Javascript,CSS也可以轻松实现。background不随浏览器滚动的代码如下:CSS代码 CSSbody {backg摘要: 看过很多博客、微博和QQ空间里面,很多人都给自己的小窝设置了固定背景,不随浏览器滚动,实现的方法除了Javascript,CSS也可以轻松实现。background不随浏览器滚动的代码如下:CSS代码 CSSbody {backg

看过很多博客、微博和QQ空间里面,很多人都给自己的小窝设置了固定背景,不随浏览器滚动,实现的方法除了Javascript,CSS也可以轻松实现。

CSS固定背景图片不跟随浏览器的滚动 第1张

background不随浏览器滚动的代码如下:

CSS代码

CSS固定背景图片不跟随浏览器的滚动(图2) CSS
body {background:url(背景图片地址) no-repeat fixed center top;margin:0;padding:0;}

只需要一个核心代码就实现了背景不随浏览器滚动,兼容了IE6+浏览器, 其核心代码为:background-attachment: fixed;

无论滚动条如何拖动,背景图片始终牢牢固定在页面上。

目前绝大部分人都在用宽屏浏览器,所以我们设置的背景最好选择在1920*1080大小较为合适,无论是微博还是QQ空间,用户关注的是中间的文章,选择背景要挑选主题画面偏向两边的,使其让人显而易见,才能起到画龙点睛的作用。

如果你用其他的方法不能解决IE6背景不随浏览器滚动,不妨试试上面的CSS代码,或者用下面的JS来解决。

IE6浏览器实现背景不随浏览器滚动的代码:

JavaScript代码

CSS固定背景图片不跟随浏览器的滚动(图2) JavaScript
<script type="text/javascript">var scrollBackground = true;</script>


文章版权及转载声明:

编辑:小秋同学本文地址:https://www.qiuhai.com/study/685.html发布于 08-20 08:33:37
文章转载或复制请以超链接形式并注明出处学习吧_一个不错的学习网站
本站文章如没有特殊说明,均采集网上收集,若要转载请务必注明出处,尊重他人劳动成果共创和谐网络环境。 声明:某些文章来源于网络,所采集的到信息本站只为传递信息和分享,不做任何双方证明,也不承担任何法律责任。 文章内容若侵犯你的权益,请联系本站客服删除!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享
加入收藏

发表评论
加载中~