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

用到的方法

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. centos7关闭防火墙以及查看防火墙状态

    1.关闭firewall:systemctl stop firewalld.service #停止firewall systemctl disable firewalld.service #禁止fir ...

  2. [CodeForces1059E] Split the Tree

    树形DP. 用倍增处理出来每个点往上能延伸出去的最远路径,nlogn 对于每个节点,如果它能被后代使用过的点覆盖,就直接覆盖,这个点就不使用,否则就ans++,让传的Max改成dp[x] #inclu ...

  3. 关于Java中返回零长度数组或空集合比较好，还是返回null这个问题的一些想法

    近日在方法返回类型为List数据类型时,返回结果为空集合比较好,还是null比较好的问题上有点纠结. 我觉得应该统一返回空集合,这样可以不用进行空指针的判断,不然又多了一个产生bug的可能性.而有人认 ...

  4. VirtualBox虚拟机下 解决centos系统无法上网的问题

    首先,在VirtualBox中设置网卡连接方式:点“设置”,在弹出的界面中点“网络”,最后选择“连接方式”为“桥接网卡”或者网都可以络地址转换  这两种我试了试都可以 接下来修改一个文件就行: 1.打 ...

  5. HDU - 1243 - 反恐训练营

    先上题目: 反恐训练营 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  6. [React] Update State Based on Props using the Lifecycle Hook getDerivedStateFromProps in React16.3

    getDerivedStateFromProps is lifecycle hook introduced with React 16.3 and intended as a replacement ...

  7. android中常见的内存泄漏和解决的方法

    android中的内存溢出预计大多数人在写代码的时候都出现过,事实上突然认为工作一年和工作三年的差别是什么呢.事实上干的工作或许都一样,产品汪看到的结果也都一样,那差别就是速度和质量了. 写在前面的一 ...

  8. hdu 4586 Play the Dice （概率+等比数列）

    Play the Dice Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) To ...

  9. GitLab 7.5.3 CentOS7安装和SMTP配置

    CentOS 7安装GitLab还是比較简单的,依照官方文档的提示一步一步操作下来.就一个地方须要改动. 參考:GitLab安装说明 在安装好以后,执行 gitlab-ctl reconfigure ...

  10. Android基础新手教程——3.4 TouchListener PK OnTouchEvent + 多点触碰

    Android基础新手教程--3.4 TouchListener PK OnTouchEvent + 多点触碰 标签(空格分隔): Android基础新手教程 本节引言: 如题,本节给大家带来的是To ...