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

1个月前 ( 08-18 ) 983阅读 4评论

看过很多博客、微博和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 条评论,983人围观)
网友昵称:阿迪
阿迪V铁粉2020-09-09椅子 回复 WeChat 7.0.15 Apple iPhone
不错不错 味道好极了[Fabulous][Fabulous]
网友昵称:李洋博客
李洋博客V博主2020-09-09 回复 Sogou Explorer Windows 10 x64
@阿迪 3Q
网友昵称:楓葉
楓葉V铁粉2020-09-05沙发 回复 Google Chrome 85.0.4183.83 Windows 8.1 x64
看看。。。。
网友昵称:李洋博客
李洋博客V博主2020-09-07 回复 Sogou Explorer Windows 10 x64
@楓葉 嗯嗯,那就看看吧
取消
支付宝二维码
支付宝二维码
微信二维码