前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS固定背景图片不跟随浏览器的滚动

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

作者头像
李洋博客
发布2021-06-15 16:38:34
1.4K0
发布2021-06-15 16:38:34
举报
文章被收录于专栏:李洋博客

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

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

CSS代码

代码语言:javascript
复制
body {background:url(背景图片地址) no-repeat fixed center top;margin:0;padding:0;}

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

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

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

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

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

JavaScript代码

代码语言:javascript
复制
<script type="text/javascript">var scrollBackground = true;</script>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-08-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • CSS代码
  • JavaScript代码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档