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

用到的方法

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. Linux—Ubuntu14.0.5设置MySQL的字符集

    1.mysql配置文件地址 cd /etc/mysql/my.cnf 2.在[mysqld]在下方添加以下代码 [mysqld] init_connect='SET collation_connect ...

  2. redis命令学习的注意问题

    1.set get命令只用于字符串,get命令取key值时string正常返回,没有key返回nil,其他类型会报错 设置的时候是set test redis ex 200000等同于SETEX te ...

  3. （34）Spring Boot的启动器Starter详解【从零开始学Spring Boot】

    Spring Boot应用启动器基本的一共有N(现知道的是44)种:具体如下: 1)spring-boot-starter 这是Spring Boot的核心启动器,包含了自动配置.日志和YAML. 2 ...

  4. codeforces 257B

    #include<stdio.h> #define mod 1000000007 int main() { __int64 n,m,i,j,k,x,y,z; while(scanf(&qu ...

  5. mongodb--find基础用法

    聚集集合查询 1.查询所有记录 db.userInfo.find(); 相当于:select* from userInfo; 默认每页显示20条记录,当显示不下的情况下,可以用it迭代命令查询下一页数 ...

  6. hdu 4704 Sum （整数和分解+高速幂+费马小定理降幂）

    题意: 给n(1<n<),求(s1+s2+s3+...+sn)mod(1e9+7). 当中si表示n由i个数相加而成的种数,如n=4,则s1=1,s2=3.                 ...

  7. COCOS2D-X暂时设置竖屏，过一阵子再设置回横屏

    mainActivity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);//竖屏 竖屏是JAVA代码 另外再改动C ...

  8. Android-黑科技-微信抢红包必备软件

                        黑科技微信抢红包 介绍: 本节类容和技术无太大关系.主要是个人认为比較好玩,年关将至,对于新起之秀微信红包.绝对是过春节首选.看到就是赚到,速速围观下载.眼下仅 ...

  9. 【POJ 2486】 Apple Tree（树型dp）

    [POJ 2486] Apple Tree(树型dp) Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8981   Acce ...

  10. eclipse配置默认的jdk

    1.window-preferences-java-Installed JREs-Add-Standard VM-[添加jre6或jre7的路径]