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

用到的方法

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .container{

                width: %; height: %;

                position: relative;

                z-index: ;

            }

            .bd_index{

                 position: relative;

                z-index: ;

                width: %; height: 600px;

                background: url(lib/banner.jpg) no-repeat center center;

                background-size: cover;

                background-attachment: fixed;

            }

            .neirong{

                width: 1200px; height: 600px;

                margin:  auto;

                font-size: 22px;

                color: #fff;

                box-sizing: border-box;

                padding: 100px ;

                text-align: center;

            }

            .index_two{

                width: %; min-height: 400px;

                background: url(lib/bg_01.jpg) no-repeat center center;

                /*  背景图高度1200px 比较高的背景图才行 */

                position: relative;

                background-size: cover;

                z-index: ;

                background-attachment: fixed;

            }

            .wenzi{

                height: 600px;

                width: %;

                background: #FFF;

                position: relative;

                z-index: ;

                font-size: 22px;

                color: #;

                box-sizing: border-box;

                padding: 100px ;

                text-align: center;

            }

        </style>

    </head>

    <body>

        <div class="container">

            <!-- 效果一 -->

            <div class="bd_index one">

                <div class="neirong">都是发了好感动卤肉饭光华路；<br>是淡饭黄齑</div>

            </div>

            <!-- 效果二 -->

            <div class="wenzi">

                都是发了好感动卤肉饭光华路；<br>是淡饭黄齑

            </div>

            <div class="index_two">

            </div>

            <div class="wenzi">

                都是发了好感动卤肉饭光华路；<br>是淡饭黄齑

            </div>

        </div>

    </body>

</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. COOKIE, SESSION, JSESSION

    http://www.360doc.com/content/11/1027/10/7472437_159535413.shtml

  2. ecshop ad调用指定广告的方法 邓士鹏

      在include/lib_goods.php文件下面新增:function getads($cat,$num){$time = gmtime();$sql = "SELECT * FRO ...

  3. 0918如何利用jmeter为数据库插入测试数据

    第一 制定测试计划,关于JMETER会通过驱动取操作数据库,因而请在底部路径填写正确. 下载该资源http://download.csdn.net/download/fnngj/3451945 第二步 ...

  4. 项目 cmdb(一)

    Django之ModelForm组件 ModelForm    a.  class Meta:            model,                           # 对应Mode ...

  5. kettle 递归循环

    var i = new Number(parent_job.getVariable(; parent_job.setVariable("i",i); true;

  6. 继续过Hard题目

    接上一篇:http://www.cnblogs.com/charlesblc/p/6283064.html 继续过Hard模式的题目吧.   # Title Editorial Acceptance ...

  7. MRv1到MRv2

    概述 引入YARN作为通用资源调度平台后.Hadoop得以支持多种计算框架,如MapReduce.Spark.Storm等. MRv1是Hadoop1中的MapReduce,MRv2是Hadoop2中 ...

  8. CCNP路由实验之十四 路由器的訪问控制ACL

     年9月1月12:00.还有一种时间叫做周期时间(periodic),即这个时间是会多次反复的.比方每周一,或者每周一到周五 ,"rotary 2″开启3002以此类推. 变成1,1变成 ...

  9. DNS通道检测 国内学术界研究情况——研究方法：基于特征或者流量，使用机器学习决策树分类算法居多

    http://xuewen.cnki.net/DownloadArticle.aspx?filename=BMKJ201104017&dbtype=CJFD<浅析基于DNS协议的隐蔽通道 ...

  10. php简单测试slim框架的功能

    php简单测试slim框架的功能 监听主路径/ $app->get( '/', function () { $template = <<<EOT<!DOCTYPE htm ...