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

用到的方法

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. em与当前元素的不解之缘

    em是相对于当前元素的字体大小而言,比如font-size:14px;那么这个元素的1em=14px. 如果当前元素未定义字体大小,则会向上继承父元素的字体大小,如果当前元素的所有祖先元素都没有定义f ...

  2. 把 Python 脚本打包成可以直接双击运行的 .exe 文件 【转】

    因为最近要用到 Python 脚本,所以自己学习了一下,顺便学习如何把它打包成 .exe 可执行文件,达到双击运行的效果,网上找了资料,保存下来学习用,原文出处:https://baijiahao.b ...

  3. code vs 3305 水果姐逛水果街Ⅱ

    3305 水果姐逛水果街Ⅱ  时间限制: 2 s  空间限制: 256000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Description 水果姐第二天心情也很不错, ...

  4. 教你高速高效接入SDK——Unity统一接入渠道SDK（Android篇）

    U8SDK的设计之初,就是为了可以支持各种游戏引擎开发的游戏,而不不过Android的原生平台.眼下一大半的手游,都是採用Unity3D和Cocos2dx开发,那么这里,我们就先来一步步给大家演示,用 ...

  5. Spring技术内幕：SpringIOC原理学习总结

    前一段时候我把Spring技术内幕的关于IOC原理一章看完,感觉代码太多,不好掌握,我特意又各方搜集了一些关于IOC原理的资料,特加深一下印象,以便真正掌握IOC的原理. IOC的思想是:Spring ...

  6. hdoj 1518 Square 【dfs】

    题意:给出n个(不同长度的)棍子,问能不能将他们构成一个正方形. 策略:深搜. hdoj 1455的简化版 代码: #include <stdio.h> #include <stri ...

  7. Object对象具体解释（二）之clone

    clone方法会返回该实例对象的一个副本,通常情况下x.clone() != x || x.clone().getClass() == x.getClass() || x.clone().equals ...

  8. 【整合篇】Activiti业务与流程的整合

    对于不管是Activtit还是jbpm来说,业务与流程的整合均类似.启动流程是绑定业务.流程与业务的整合放到动态代理中 [java] view plain copy print" style ...

  9. matlab实现基于DFS的Ford_Fulkerson最大流最小割算法

    function [F, maxf, V, S] = Ford_Fulkerson(C, src, sink) n = size(C, 1); F = zeros(n); maxf = 0; V = ...

  10. Adding a view

    在添加View之前,之前的页面是下面这个样子,需要注意的是浏览器标题,以及浏览器的内容 https://docs.asp.net/en/latest/tutorials/first-mvc-app/a ...