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

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

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

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>

文章声明:以上内容(如有图片或视频亦包括在内)除非注明,否则均为网站名称原创文章,转载或复制请以超链接形式并注明出处。https://xz.itlaoli.com/blog/538.html

« 上一篇
下一篇 »

相关推荐

Linux手动分区挂载10TB磁盘到 /www目录并安装宝塔面板到数据盘的完整教程

2025年10月16日

437阅读

记录Windows11系统暂停更新怎么延长周数的教程

2025年08月25日

2850阅读

Windows11失败,提示“ahsProtector-你的电脑上有服务尚未准备好用于此版本的Windows”的解决方案

2025年08月21日

3313阅读

zblogPHP李洋个人博客主题使用网址导航模板的图文教程

2025年05月27日

5606阅读

百度普通收录API提交后提示 {"error":400,"message":"site init fail"}问题怎么解决?

2025年03月03日

5067阅读

zblog应用中心后台无法更新主题模板及无法新建标签的解决办法

2025年02月24日

6608阅读

发表评论

访客 访客
评论列表 (有 4 条评论,9314人围观)
网友昵称:阿迪
阿迪 V 游客 WeChat 7.0.15 Apple iPhone 椅子
2020年09月09日 来自天津 回复
不错不错 味道好极了[Fabulous][Fabulous]
网友昵称:李洋博客
李洋博客 V 博主 Sogou Explorer Windows 10 x64
2020年09月09日 来自天津 回复
@阿迪 3Q
网友昵称:楓葉
楓葉 V 游客 Google Chrome 85.0.4183.83 Windows 8.1 x64 沙发
2020年09月05日 来自上海 回复
看看。。。。
网友昵称:李洋博客
李洋博客 V 博主 Sogou Explorer Windows 10 x64
2020年09月07日 来自天津 回复
@楓葉 嗯嗯,那就看看吧
取消
微信二维码
微信二维码
支付宝二维码