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 ...
随机推荐
- 企业邮箱 Webmail 通讯录导入 Outlook
企业邮箱暂不支持直接将通讯录同步至客户端软件,可以通过将通讯录在 Webmail 邮箱中导出,再导入所用软件的间接方法进行使用. 以Outlook 2010为例,如下详细导入通讯录步骤: 1.打开Ou ...
- 【神经网络与深度学习】【C/C++】C++日志操作开源函数库之Google-glog
今天想给我的C++项目找一个开源的日志类,用于记录系统日志,结果浪费了半个下午的时间.从网上搜索相关资料,找到以下几个备选方案: 1.log4cplus 下载地址:http://sourceforge ...
- Array js扩展方法 forEach()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 论文阅读 | BadNets: Identifying Vulnerabilities in the Machine Learning Model Supply Chain
BadNets: 识别机器学习模型供应链中的漏洞 摘要 基于深度学习的技术已经在各种各样的识别和分类任务上取得了最先进的性能.然而,这些网络通常训练起来非常昂贵,需要在许多gpu上进行数周的计算;因此 ...
- springboot笔记-使用JSP
Spring Boot 项目中使用 JSP: 项目结构:需要添加webapp文件夹用来存放目录 jsp 文件 spring-boot-jsp +-src +- main +- java +- reso ...
- python并发编程-多线程实现服务端并发-GIL全局解释器锁-验证python多线程是否有用-死锁-递归锁-信号量-Event事件-线程结合队列-03
目录 结合多线程实现服务端并发(不用socketserver模块) 服务端代码 客户端代码 CIL全局解释器锁****** 可能被问到的两个判断 与普通互斥锁的区别 验证python的多线程是否有用需 ...
- go build命令详解
原文地址讲解:https://blog.csdn.net/zl1zl2zl3/article/details/83374131
- 删除链表中重复的结点——牛客剑指offer
题目描述: 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 例如,链表1->2->3->3->4->4->5 处理 ...
- Dasha and Photos CodeForces - 761F (前缀优化)
大意: 给定n*m初始字符矩阵, 有k个新矩阵, 第$i$个矩阵是由初始矩阵区间赋值得到的, 求选择一个新矩阵, 使得其余新矩阵到它距离和最小. 字符集比较小, 可以考虑每次区间覆盖对每个字符的贡献. ...
- deepin 15.10.1 GTX1060 NVIDIA 驱动安装,双屏显示问题记录
有一段时间没有用Linux了.由于买了个4k的戴尔显示屏,在deepin系统上无法用,从昨晚到现在,总于解决了我的问题! 问题1:无法直接在深度的显卡驱动管理器哪里直接切换,网上看到很多人都有这个问题 ...