代码如下，直接拷贝出去就能看效果；

用到的方法

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             .container{
  8.                 width: %; height: %;
  9.                 position: relative;
  10.                 z-index: ;
  11.             }
  12.             .bd_index{
  13.                  position: relative;
  14.                 z-index: ;
  15.                 width: %; height: 600px;
  16.                 background: url(lib/banner.jpg) no-repeat center center;
  17.                 background-size: cover;
  18.                 background-attachment: fixed;
  19.             }
  20.             .neirong{
  21.                 width: 1200px; height: 600px;
  22.                 margin:  auto;
  23.                 font-size: 22px;
  24.                 color: #fff;
  25.                 box-sizing: border-box;
  26.                 padding: 100px ;
  27.                 text-align: center;
  28.             }
  29.             .index_two{
  30.                 width: %; min-height: 400px;
  31.                 background: url(lib/bg_01.jpg) no-repeat center center;
  32.                 /*  背景图高度1200px 比较高的背景图才行 */
  33.                 position: relative;
  34.                 background-size: cover;
  35.                 z-index: ;
  36.                 background-attachment: fixed;
  37.             }
  38.             .wenzi{
  39.                 height: 600px;
  40.                 width: %;
  41.                 background: #FFF;
  42.                 position: relative;
  43.                 z-index: ;
  44.                 font-size: 22px;
  45.                 color: #;
  46.                 box-sizing: border-box;
  47.                 padding: 100px ;
  48.                 text-align: center;
  49.             }
  50.         </style>
  51.     </head>
  52.     <body>
  53.  
  54.         <div class="container">
  55.             <!-- 效果一 -->
  56.             <div class="bd_index one">
  57.                 <div class="neirong">都是发了好感动卤肉饭光华路；<br>是淡饭黄齑</div>
  58.             </div>
  59.             <!-- 效果二 -->
  60.             <div class="wenzi">
  61.                 都是发了好感动卤肉饭光华路；<br>是淡饭黄齑
  62.             </div>
  63.             <div class="index_two">
  64.  
  65.             </div>
  66.             <div class="wenzi">
  67.                 都是发了好感动卤肉饭光华路；<br>是淡饭黄齑
  68.             </div>
  69.         </div>
  70.  
  71.     </body>
  72. </html>

pc页面滚动的时候，背景图不动只是页面滚动的更多相关文章

  1. 页面中图片以背景图形式展示好还是以img标签形式展示

    img和background-image的异同: img是网页结构层面上的标签,页面中多一个img标签就会多一次http请求,且当我们浏览页面时,img标签作为网页结构的一部分,会在浏览器加载结构的过 ...

  2. html背景图不随滚轮滚动，而且按住Ctrl并滚动滚轮时，图片不会变大缩小，就像百度的首页一样

    之前在百度知道我提问过这一个问题,后来解决了.不过好多人来问我时怎么解决的,源码.其实很简单.这里我贴一下代码.有需要的小伙伴不用再加我qq了,直接来这里取吧. 里面的图片是我随便找的. <!D ...

  3. css固定背景图位置 实现屏幕滚动时 显示背景图不同区域

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. [Unity3D插件]2dtoolkit系列二 动画精灵的创建以及背景图的无限滚动

    经过昨天2dtoolkit系列教程一的推出,感觉对新手还有有一定的启发作用,引导学习使用unity 2dToolKit插件的使用过程,今天继续系列二——动画精灵的创建,以及背景图的无限循环滚动,在群里 ...

  5. 背景图height：100%显示

    这段时间,写移动端页面,总是遇到背景图在不同的设备上的显示拉伸问题: 本来想写百分比,可是并没有显示,又不想media@ ,换一种思路用img写 群友提供了一个办 html,body{height:1 ...

  6. winform 添加背景图 闪屏问题解决

    winform中只要添加了背景图片资源,窗体加载显示的时候就会出现不停的闪屏操作,网上找了很多方法,效果都不明显: 然后自己观察和思路:看窗体的加载过程,当有背景图的时候,首先出来的是背景图,之后背景 ...

  7. css常用属性之绝对定位、相对定位、滚动条属性、背景图属性、字体、鼠标、超链接跳转页面

    1.绝对定位position: fixed(比如广告页面向下滑动的时候,页面最上方有个标题不能随之滑动,就需要用到position: fixed,同时还需要用到一个标签(标签高度很高才会出现滚动的情况 ...

  8. IE6下 input 背景图滚动问题及标签规范

    ie6 背景图滚动问题: <title>ie6下input背景图滚动问题</title> <style> .box{ height:20px; width:300p ...

  9. css中用一张背景图做页面的技术有什么优势？

    css中用一张背景图做页面的技术有什么优势? 简单介绍一下 CSS Sprites 的优点: 当用户往U盘中拷200张图片,会等很久.但是如果弄成一个文件,再拷贝就会快很多. CSS Sprites ...

随机推荐

  1. [APIO2018]铁人两项 [圆方树模板]

    把这个图缩成圆方树,把方点的权值设成-1,圆点的权值设成点双的size,算 经过这个点的路径的数量*这个点的点权 的和即是答案. #include <iostream> #include ...

  2. 09.正则表达式re-3.常用的匹配规则

    模式 描述 \w 匹配字母.数字及下划线 \W 匹配不是字母.数字及下划线的字符 \s 匹配任意空白字符,等价于[\t\n\r\f] \S 匹配任意非空字符 \d 匹配任意数字,等价于[0-9] \D ...

  3. VMware虚拟机上安装CentOS 7

    下载CentOS7,点击网址下载,地址:http://isoredirect.centos.org/centos/7/isos/x86_64/CentOS-7-x86_64-DVD-1804.iso ...

  4. jQuery动态效果

    1.一号店首页 2.淘宝网购物车

  5. linux下的mongodb数据库原生操作

    mongodb,是一种结构最像mysql的nosql mysql中的数据库,mongodb中也有,区别在于, myql中数据库下的是表,字段和数据的形式存在 mongodb数据库下的是叫集合(和pyt ...

  6. 洛谷 P1198 BZOJ 1012 [JSOI2008]最大数

    题目描述 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个操作,分为三种:操作 1 :把某个节点 x 的点权增加 a .操作 2 :把某个节点 x 为根的子树中所有点的点权都增加 ...

  7. hdu 4612 双联通缩点+树形dp

    #pragma comment(linker,"/STACK:102400000,102400000")//总是爆栈加上这个就么么哒了 #include<stdio.h> ...

  8. [bzoj4196][Noi2015]软件包管理器_树链剖分_线段树

    软件包管理器 bzoj-4196 Noi-2015 题目大意:Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管理器会帮助你从软件 ...

  9. POJ 1474

    半平面交模板 #include <iostream> #include <cstdio> #include <cstring> #include <algor ...

  10. ViewPage+Frament+listView滑动效果

    近期在做一个须要使用Frament+ViewPage制作一个滑动的效果,看了非常多资料,最终实现了,这与大家分享一下战果 总结一下.这里我做了一个Demo分享给大家 我的文件文件夹结构图 1.首先要有 ...