效果:

只需要在需要背景不跟着动的div里:

 div{
    background:url();
    background-attachment:fixed;
}

加上background-attachment:fixed;就可以了,兼容IE6+

如果不加这个属性:

网上兼容IE6的方法:

 <script type="text/javascript">
 var scrollBackground = true;
</script>

加一句js就行了

css 实现背景图片不跟着滚动条滚动而滚动的更多相关文章

  1. CSS中背景图片定位方法

    转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...

  2. (转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

    http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中 ...

  3. HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

    CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...

  4. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  5. CSS中背景图片的background-position中的left top到底是相对于谁的?

    在学习的时候遇到了如下问题: CSS中背景图片的background-position中的left top到底是相对于谁的,content-box?padding-box?border-box? ba ...

  6. CSS background-image背景图片相关介绍

    这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...

  7. css设置背景图片

    background:pink;图片在背景图上面 background-image:url(food.jpg);一张图片铺满一行background-repeat:repeat-x;同一张图片多张铺满 ...

  8. CSS定位背景图片 background-position

    网站的样式的时候经常会发现一种情况,就是在很多background属性里都调用同一张图片,来满足网页各个部分的使用.打开这种图片看一下,会发现这张图片上包含了很多小图片; 又如: 这些小图片就是整图分 ...

  9. CSS常用背景图片定位方法

    CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会 ...

随机推荐

  1. Microsoft Visual Studio 2013安装及试用

    我是在网上下载的vs2013版的安装包,下载的是压缩文件,解压后是2.86GB.安装包下载完成后我们就可以进入安装了. 同时建议最好在互联网连接的情况下安装. 打开下载好的文件,我们要选择.exe可执 ...

  2. 【个人总结】软件工程M1/M2总结

    个人博客连接: http://www.cnblogs.com/lwq12061168/p/4094252.html http://www.cnblogs.com/lwq12061168/p/40284 ...

  3. Scrum Meeting 8

                第八次会议 No_00:工作情况 No_01:任务说明 待完成 已完成 No_10:燃尽图 No_11:照片记录 待更新 No_100:代码/文档签入记录 No_101:出席表 ...

  4. Scrum Meeting 7

                第七次会议 No_00:工作情况 No_01:任务说明 待完成 已完成 No_10:燃尽图 No_11:照片记录 待更新 No_100:代码/文档签入记录 No_101:出席表 ...

  5. 第三个Sprint冲刺第四天(燃尽图)

  6. 使用matlab自带工具实现rcnn

    平台:matlab2016b matlab自带一个cifar10Net工具可用于深度学习. 图片标注 这里使用的是matlab自带的工具trainingImageLabeler对图像进行roi的标注. ...

  7. Vue 组件化

    根实例└─ TodoList ├─ TodoItem │ ├─ DeleteTodoButton │ └─ EditTodoButton └─ TodoListFooter ├─ ClearTodos ...

  8. Personal Software Process (PSP)

    日期 分类 开始时间 结束时间 中断时间 净时间 活动 备注 C U 2016/03/15 随笔 9:30 10:40 0 70 博客更新 更新<软件项目管理(1)> Y Minute 随 ...

  9. Maven 3-Maven依赖版本冲突的分析及解决小结

    我自己遇到了一个问题: 我需要使用一个api,这个api已经引入包:slf4j-log4j12 所以,在自己的pom中,如果引入了这个包,需要exclude掉: 因为在pom.xml中查询是找不到的, ...

  10. Java之StringBuffer使用方法

    package basic; //StringBuffer的使用方法,用于保存频繁修改的字符串 public class StringBufferDemo { public static void m ...