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

talklee

温馨提示:这篇文章已超过1318天没有更新,请注意相关的内容是否还可用!

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

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

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

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代码

<script type="text/javascript">var scrollBackground = true;</script>
文章版权声明:除非注明,否则均为李洋个人博客原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
评论列表 (有 4 条评论,7044人围观)
网友昵称:阿迪
阿迪 V 游客 WeChat 7.0.15 Apple iPhone 椅子
2020-09-09 来自天津 回复
不错不错 味道好极了[Fabulous][Fabulous]
网友昵称:talklee
talklee V 博主 Sogou Explorer Windows 10 x64
2020-09-09 来自天津 回复
@阿迪 3Q
网友昵称:楓葉
楓葉 V 游客 Google Chrome 85.0.4183.83 Windows 8.1 x64 沙发
2020-09-05 来自上海 回复
看看。。。。
网友昵称:talklee
talklee V 博主 Sogou Explorer Windows 10 x64
2020-09-07 来自天津 回复
@楓葉 嗯嗯,那就看看吧

目录[+]