html背景图不随滚轮滚动,而且按住Ctrl并滚动滚轮时,图片不会变大缩小,就像百度的首页一样
之前在百度知道我提问过这一个问题,后来解决了。不过好多人来问我时怎么解决的,源码。
其实很简单。这里我贴一下代码。有需要的小伙伴不用再加我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并滚动滚轮时,图片不会变大缩小,就像百度的首页一样的更多相关文章
- Jquery 点击按钮将其背景图换成另一张,再次点击恢复默认图片
这是Jquery代码: $(function () { $("#h1").toggle(function () { $("#h1").css("bac ...
- CSS实现背景图尺寸不随浏览器大小而变化的两种方法
一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看 一些网站的首页 ...
- css背景图充满屏幕
代码: body { /* 加载背景图 */ background: url(resource/inv_bg.png); /* 背景图不平铺 */background-repeat: no-repea ...
- Visual Studio 2017 设置透明背景图
一.前言 给大家分享一下,如何为VS2017设置透明背景图.下面是一张设置前和设置后的图片. 设置前: 设置后: 二.设置背景图片的扩展程序 我们打开VS的扩展安装界面:[工具]->[扩展和更新 ...
- html的css背景图的repeat
HTML里background-image中,可以设置background-repeat实现平铺,前面博文中关于css样式换行的(相关博文:超文本css样式换行),其中有个三个div组合的,中间的di ...
- 用ctrl+鼠标滚动调节字体大小
如此设置之后,按住ctrl+鼠标滚动,可以放大和变小代码的字号.
- [Unity3D插件]2dtoolkit系列二 动画精灵的创建以及背景图的无限滚动
经过昨天2dtoolkit系列教程一的推出,感觉对新手还有有一定的启发作用,引导学习使用unity 2dToolKit插件的使用过程,今天继续系列二——动画精灵的创建,以及背景图的无限循环滚动,在群里 ...
- IE6下 input 背景图滚动问题及标签规范
ie6 背景图滚动问题: <title>ie6下input背景图滚动问题</title> <style> .box{ height:20px; width:300p ...
- pc页面滚动的时候,背景图不动只是页面滚动
代码如下,直接拷贝出去就能看效果: 用到的方法 background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动. <!DOCTYPE html> <h ...
随机推荐
- jmeter设置中文语言
1.在jmeter的bin目录下找到 jmeter.properties 文件并打开 2.搜索关键字 “language”,将37行(以搜索到的位置为准)改成下图所示:language=zh_CN ...
- JQuery II
jQuery事件的绑定 <body> <button>点击1</button> <button>点击2</button> </body ...
- Htmlunit 设置缓存文件
起因:最近用Htmlunit爬取网页.demo运行起来后,发现速度相当慢,一直在不停的加载js文件,偶尔还会报错,js超时等.抓包工具看了一下请求,发现一直在不停的下载js文件.按理说请求过js文件后 ...
- 【科普杂谈】一文看懂大数据的技术生态圈,Hadoop,hive,spark都有了
大数据本身是个很宽泛的概念,Hadoop生态圈(或者泛生态圈)基本上都是为了处理超过单机尺度的数据处理而诞生的.你可以把它比作一个厨房所以需要的各种工具.锅碗瓢盆,各有各的用处,互相之间又有重合.你可 ...
- 【Linux开发】linux设备驱动归纳总结(六):2.分享中断号
linux设备驱动归纳总结(六):2.分享中断号 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...
- 复杂json格式转化为javabean
工具阿里巴巴的fastjson包 <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson --><dependenc ...
- 纯前端表格控件SpreadJS以专注业务、提升效率赢得用户与市场
提起华为2012实验室,你可能有点陌生. 但你一定还对前段时间华为的那封<海思总裁致员工的一封信>记忆犹新,就在那篇饱含深情的信中,我们知道了华为为确保公司大部分产品的战略安全和连续供应, ...
- BugkuCTF--never give up
这道题还挺有意思的... http://123.206.87.240:8006/test/hello.php 查看元素,有个1p.html,访问. 还没看到网页元素就跳转了...抓包! 抓到了一堆东西 ...
- spark教程(九)-操作数据库
数据库也是 spark 数据源创建 df 的一种方式,因为比较重要,所以单独算一节. 本文以 postgres 为例 安装 JDBC 首先需要 安装 postgres 的客户端驱动,即 JDBC 驱动 ...
- TCP/IP 协议是如何保证数据可靠性的?
原文: 网络基础:TCP协议-如何保证传输可靠性 TCP协议传输的特点主要就是面向字节流.传输可靠.面向连接.这篇博客,我们就重点讨论一下TCP协议如何确保传输的可靠性的. 确保传输可靠性的方式TCP ...