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

用到的方法

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. 使用GitHub代码仓库Repositories上传自己的项目代码

    1.下载客户端github(必须下载,需要该软件所提供的Git shell输入命令来上传项目)下载地址: https://github-windows.s3.amazonaws.com/GitHubS ...

  2. Codeforces 851B/C

    B. Arpa and an exam about geometry 传送门:http://codeforces.com/contest/851/problem/B 本题是一个平面几何问题. 平面上有 ...

  3. opencart的语言包安装

    语言包复制到对应的目录: 前台:将档案上传至商店根目录\catalog\language\ 后台:将档案上传至商店根目录\admin\language\ 在后台: 增加了中文语言包 ========= ...

  4. nutz中实现登录验证

    一.nutz是什么 nutz是一个轻便的web端开发框架.主页如下:http://www.nutzam.com/core/nutz_preface.html 二.session简单介绍 大家都知道ht ...

  5. 数据库--ACID特性

    事务的ACID属性 原子性(Atomicity) 原子性是指事务是一个不可分割的工作单位,事务中的操作要么都发生,要么都不发生. 一致性(Consistency) 事务必须使数据库从一个一致性状态变换 ...

  6. Java中的事务

    Java中的事务 学习了:https://www.cnblogs.com/chengpeng15/p/5802930.html 膜拜一下 org 分为三类:jdbc事务.jta事务.容器事务:

  7. C++ exit 与 return 浅析

    [摘要] 本文从代码形式.经常使用方式,相关概念,调用关系和比較分析,这5个维度浅析 exit 与 return 在C++的同样点与差别. [常见形式] exit(0):   正常执行程序并退出程序. ...

  8. H_Dp

    <span style="color:#000099;">/* H - 简单dp 例题扩展 Time Limit:3000MS Memory Limit:65536KB ...

  9. csu 1030: 素数槽

     素数槽 Description 处于相邻的两个素数p和p + n之间的n - 1个连续的合数所组成的序列我们将其称为长度为n的素数槽.比如,‹24, 25, 26, 27, 28›是处于素数23 ...

  10. luogu1775 古代人的难题 打表找规律

    题目大意:给出一正整数k,求满足(x^2-x*y-y^2)^2=1且x,y∈[1,k]且x^2+y^2最大的正整数x,y. 既然x,y的范围给出来了,我们便有了暴力解法.因此,本题最适合打表找规律了! ...