之前在百度知道我提问过这一个问题，后来解决了。不过好多人来问我时怎么解决的，源码。
其实很简单。这里我贴一下代码。有需要的小伙伴不用再加我qq了，直接来这里取吧。

里面的图片是我随便找的。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

    html,

    body {

        height: 100%;

    }

    body {

        margin: 0;

        background-repeat: no-repeat;

        background-size: cover;

        background-position: center;

        background-attachment: fixed;

        background-image: url(http://pic1.win4000.com/wallpaper/b/589d687069ed9.jpg);

    }

    h1{

        height: 100%;

        width: 100%;

        margin: 0;

        padding: 0;

        color:#fff;

        background-color: rgba(0,0,0,0.5);

        display: -webkit-flex;

        display: -moz-flex;

        display: -ms-flex;

        display: -o-flex;

        display: flex;

        justify-content: center;

        align-items: center;

    }

    </style>

</head>

<body>

    <h1>按住Ctrl+滚动滚轮：可以看到文字缩放，背景不动</h1>

</body>

</html>

html背景图不随滚轮滚动，而且按住Ctrl并滚动滚轮时，图片不会变大缩小，就像百度的首页一样的更多相关文章

  1. Jquery 点击按钮将其背景图换成另一张，再次点击恢复默认图片

    这是Jquery代码: $(function () { $("#h1").toggle(function () { $("#h1").css("bac ...

  2. CSS实现背景图尺寸不随浏览器大小而变化的两种方法

    一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看   一些网站的首页 ...

  3. css背景图充满屏幕

    代码: body { /* 加载背景图 */ background: url(resource/inv_bg.png); /* 背景图不平铺 */background-repeat: no-repea ...

  4. Visual Studio 2017 设置透明背景图

    一.前言 给大家分享一下,如何为VS2017设置透明背景图.下面是一张设置前和设置后的图片. 设置前: 设置后: 二.设置背景图片的扩展程序 我们打开VS的扩展安装界面:[工具]->[扩展和更新 ...

  5. html的css背景图的repeat

    HTML里background-image中,可以设置background-repeat实现平铺,前面博文中关于css样式换行的(相关博文:超文本css样式换行),其中有个三个div组合的,中间的di ...

  6. 用ctrl+鼠标滚动调节字体大小

    如此设置之后,按住ctrl+鼠标滚动,可以放大和变小代码的字号.

  7. [Unity3D插件]2dtoolkit系列二 动画精灵的创建以及背景图的无限滚动

    经过昨天2dtoolkit系列教程一的推出,感觉对新手还有有一定的启发作用,引导学习使用unity 2dToolKit插件的使用过程,今天继续系列二——动画精灵的创建,以及背景图的无限循环滚动,在群里 ...

  8. IE6下 input 背景图滚动问题及标签规范

    ie6 背景图滚动问题: <title>ie6下input背景图滚动问题</title> <style> .box{ height:20px; width:300p ...

  9. pc页面滚动的时候，背景图不动只是页面滚动

    代码如下,直接拷贝出去就能看效果: 用到的方法 background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动. <!DOCTYPE html> <h ...

随机推荐

  1. Django的下载与使用基础

    下载安装 命令行 pip3 install django==1.11.23 -i https://pypi.tuna.tsinghua.edu.cn/simple pycharm file -- &g ...

  2. R数据分析（一）

    R语言特点: 主要用于统计分析.图表显示.   属于解释型语言.支持模块化编程. 应用:数据科学.统计计算.机器学习   学习方法: 做笔记,记重点或者心得 手动实践,加深理解 坚持练习,利用身边数据 ...

  3. umask的一般用法

    常常会遇到我的Linux系统默认的八进制的umask值是0022,而我创建的文件的八进制权限却是644,这个是怎么一回事? umask值只是一个掩码,它会屏蔽掉掉不想授予该安全级别的权限. 用法是要把 ...

  4. 【MapReduce】二、MapReduce编程模型

      通过前面的实例,可以基本了解MapReduce对于少量输入数据是如何工作的,但是MapReduce主要用于面向大规模数据集的并行计算.所以,还需要重点了解MapReduce的并行编程模型和运行机制 ...

  5. 【VS开发】设备控制台 (DevCon.exe) 示例

    设备控制台 (DevCon.exe) 示例 本部分提供以下设备控制台 (DevCon.exe) 命令的示例: DevCon HwIDs 示例 1:查找所有硬件 ID 示例 2:使用模式查找硬件 ID ...

  6. elastic 查询案例Query与Filter + CRUD简单理解 + dynamic mapping + keyword

    1.增 PUT mytest01/external/ { "name": "xiaowei" } curl -XPUT '192.168.1.49:9200/m ...

  7. 统计学习方法 | 第3章 k邻近法

    第3章 k近邻法   1．近邻法是基本且简单的分类与回归方法.近邻法的基本做法是:对给定的训练实例点和输入实例点,首先确定输入实例点的个最近邻训练实例点,然后利用这个训练实例点的类的多数来预测输入实例 ...

  8. EntityFramework数据迁移（笔记）

    1.启用迁移 在Package Manager Console中运行Enable-Migrations命令 此命令已将Migrations文件夹添加到我们的项目中,此新文件夹包含两个文件: Confi ...

  9. Vue 2019开发者图谱

    作为 Vue 的初学者,您或许已经听过很多关于它的专业术语了,例如:单页面应用程序.异步组件.服务器端呈现等,您可能还听过和Vue经常一起被提到的工具和库,如Vuex.Webpack.Vue CLI和 ...

  10. Git及码云学习总结

    前言 一.Git是一个版本管理工具软件. 二.windows 系统的使用: 1.git软件的安装:https://git-scm.com/downloads mac系统是自带的不用安装 windows ...