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

最新推荐文章于 2022-12-20 18:51:07 发布
最新推荐文章于 2022-12-20 18:51:07 发布
阅读量886 收藏 2
点赞数 2
原文链接：https://segmentfault.com/a/1190000016788803
版权

之前在百度知道我提问过这一个问题，后来解决了。不过好多人来问我时怎么解决的，源码。
其实很简单。这里我贴一下代码。有需要的小伙伴不用再加我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>
weixin_33724046
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html中背景图不随着鼠标的转动改变大小
Heandme的博客
09-16 1252
直接在页面中设置body的属性就好了，此为备忘录body { background:url("Img/allbac.jpg") ; background-position: center 0; background-repeat: no-repeat; background-attachment:fi
HTML炫酷的背景代码，可用，亲测有效
最新发布
chenzhi0122的博客
06-11 1353
如果效果好的话下次给大家发一个我用在CZbuy的更漂亮的！html炫酷的背景代码，会跟随鼠标移动变化。
比较好看的背景html,一个超炫的Canvas背景，做网页背景挺好看
weixin_29713915的博客
06-21 1538
预览页面的传送门：LY-jilei代码都在html里，(右键查看源代码即可得到啦)这篇文章会有点水，哈哈哈哈~睡觉想想还是贴个代码吧jsdocument.addEventListener('touchmove', function (e) {e.preventDefault()})var c = document.getElementsByTagName('canvas')[0],x = c.ge...
html或CSS的图片如何随着网页界面的缩小或放大跟着左右移动 ？
POJIE19820106的博客
12-28 2185
<div style="width:100%; text-align:center;"><input type="text" value="Text Box" style="width:300px;" /></div>实现Text Box左右居中, 随页面界面缩小或放大而一直居中(方法: 使用一个宽度100%的div, 让其内容居中). 转载于:ht...
html多个好看的背景动态效果（附源码）
热门推荐
xcLeigh
12-09 3万+
html多个好看的背景动态效果，html背景动态效果，里面带有五种好看的，酷炫的动态背景效果，图片轮动动态背景效果，星空流星动态背景效果，动态美女背景效果，动态屋雨背景效果，动态街道背景效果，动态夜幕背景效果，可以直接嵌套在在自己的代码里。
用HTML5实现鼠标滚轮事件放大缩小图片的功能
09-28
本文主要讲解如何通过HTML5实现一个功能，即当用户使用鼠标滚轮时，图片能够随之放大或缩小。这一功能提高了网页的交互性，特别是在展示细节丰富的图像时非常有用。 首先，大部分现代浏览器都支持鼠标滚轮事件。在...
基于jquery的滚动鼠标放大缩小图片效果
10-28
在这个例子中，我们利用jQuery来绑定鼠标滚轮事件，并根据滚轮的向上或向下滚动来放大或缩小图片。 在jQuery中，我们可以使用`.bind()`方法来绑定事件处理器。对于IE浏览器，我们需要监听`mousewheel`事件，而对于...
SuperPicture_支持滚轮放大缩小_图片控件改进_
10-04
标题中的“SuperPicture_支持滚轮放大缩小_图片控件改进_”揭示了这个控件的核心特性，即它不仅是一个图片显示控件，还特别加入了滚轮缩放功能，使得用户可以通过鼠标滚轮来实现图片的放大和缩小，极大地提升了交互...
LabVIEW操作鼠标滚轮放大或缩小图像
05-09
项目详情请参见：... 本项目将分享一个关于鼠标滚轮的有意思小技巧，主要基于图片控件中用于缩放图像的因子操作鼠标滚轮来放大和缩小图片。 项目可直接运行~
js实现图片在div内滚轮放大缩小拖动，有滚动条，双击回原状，无插件，赠送网上搜罗的其他的一些图片放大缩小js资源
09-12
js实现图片在div内滚轮放大缩小拖动，有滚动条，双击回原状，无插件，赠送网上搜罗的其他的一些图片放大缩小文件，在每个压缩包是一个，打开压缩包里的网页文件就可以看效果。本人的在“自己的.html”里，记事本打开...
html div图片自动滚动显示不全,html2canvas div内有滚动条导致生成图片的内容不全...
weixin_29582919的博客
05-30 1047
只把左边 图片区的内容 生成图片$(document).ready(function(){var element = $('#cBody');var cwidth = $('#content').width();var cheight = $('#cBody').height();var scrollY = $('#cBody').scrollTop();var scrollX = $('#cBo...
用html2canvas遇到因为有滚动条截图不完整问题的解决方法
weixin_42333548的博客
05-27 9491
本文章向大家介绍在vue项目中用html2canvas遇到因为有滚动条截图不完整问题的解决方法(设置height和windowHeight)，需要的朋友可以参考一下。 1、安装 npm install html2canvas --save 2、使用 import html2canvas from 'html2canvas'; 基本逻辑 html2canvas(document.getElementById('demo'), { backgroundColor: '...
html轮播图片不显示不了,图片轮播的奇怪现象【图片显示不完整】
weixin_34543510的博客
06-20 3408
测试轮播 functiongetByClass(className,context){context=context ||document;if(context.getElementsByClassName){returncontext.getElementsByClassName(className);}var nodes=context.getElementsByClassName('*')...
为什么html中图片显示不出来,网页图片显示不出来该怎么办?
weixin_35011928的博客
06-04 7551
1，解决Internet 选项设置不发的方法，在浏览器菜单栏，选择“工具”项，打开后，选择“Internet 选项”。22，进入后，先选择“高级”，然后拖动右侧的滚动条，找到“显示图片”这一项，其当前状态是“未勾选”。3，将“显示图片”这一项勾选上，然后按“应用”按钮。再去重新打开浏览器试一试，4，如果还不行，同样进入“Internet 选项”的高级，点击“重置”按钮，在“重置Internet E...
轮播图为什么不显示？
Auto_limiless的博客
09-06 3154
原因1：云服务器（如七牛云，腾讯云，阿里云）域名过期 原因2：nacos服务器需要重启，主要针对网关，页面（CMS，index） 原因3：在轮播图页面F12中network中是否报红 以上原因解决后注意重启网页静态服务器ngnix，服务注册中心nacos ...
html轮播图不能用png么,为什么我轮播图图片显示不出来？
weixin_32049085的博客
06-24 711
胖虎就是智虎LOGOEN / CN首页关于我们新闻资讯产品展示营销网络招贤纳士联系我们*{margin: 0;padding: 0;font-family: "微软雅黑";text-decoration: none;list-style: none;}.header{height: 100px;background: #FFFFFF;text-align: center;position: re...
css背景属性
zhao1519937848的博客
06-22 265
css背景 1）背景颜色 background-color：颜色值； 如background-color：#f00; 2）background-image：url(背景图片的路径及全称); 如background-image：url(image/1.jpg);(在设置css背景图片的时候要注意css文件与背景图片文件的相对路径) 网页上有两种图片形式：插入图片、背景图； 插入图片：属于网...
【HTML】HTML+CSS背景不随滚动条滚动
此人太懒，没有任何简介
12-20 2971
HTML+CSS背景不随滚动条滚动
html轮播图片不显示不了,求教各位前辈，一个轮播图在谷歌浏览器下显示异常的问题！！！...
weixin_30611667的博客
06-20 1496
新手练习，写了一个无缝轮播。在火狐和IE11下都运行正常，在谷歌浏览器下第一次运行会出现某几张图片不显示，但也没具体的报错信息，需要手动刷新几次后才能正常显示。求教大家帮忙看看问题出在哪里？谷歌浏览器：版本 64.0.3282.140(正式版本32 位)Tab选项卡焦点图* {margin: 0;padding: 0;}li {list-style: none;}#start {display: ...
python pyqt制作一个好像图片查看器那样，显示图片，能按住ctrl滑动滚轮放大缩小查看图片 框选矩形获取坐标等功能
05-12
可以使用 PyQt5 中的 QGraphicsView 和 QGraphicsScene 实现这个功能。以下是一个简单的示例代码： ```python import sys from PyQt5.QtWidgets import QApplication, QGraphicsView, QGraphicsScene from PyQt5.QtGui import QPixmap, QPen, QColor from PyQt5.QtCore import Qt class ImageViewer(QGraphicsView): def __init__(self): super().__init__() # 创建场景 self.scene = QGraphicsScene() self.setScene(self.scene) # 加载图片 self.image = QPixmap('image.jpg') self.scene.addPixmap(self.image) # 设置滚动条策略 self.setVerticalScrollBarPolicy(Qt.ScrollBarAsNeeded) self.setHorizontalScrollBarPolicy(Qt.ScrollBarAsNeeded) self.setDragMode(QGraphicsView.ScrollHandDrag) # 设置缩放策略 self.setRenderHint(QPixmap.Antialiasing) self.setRenderHint(QPixmap.SmoothTransformation) self.setRenderHint(QPixmap.HighQualityAntialiasing) self.setInteractive(True) self.setTransformationAnchor(QGraphicsView.AnchorUnderMouse) self.setResizeAnchor(QGraphicsView.AnchorUnderMouse) # 画笔和矩形框 self.pen = QPen(QColor(255, 0, 0, 128)) self.rect = None self.start_pos = None def wheelEvent(self, event): # 按住 Ctrl 键滚动鼠标滚轮进行缩放 if event.modifiers() == Qt.ControlModifier: delta = event.angleDelta().y() factor = 1.1 if delta > 0 else 0.9 self.scale(factor, factor) else: super().wheelEvent(event) def mousePressEvent(self, event): # 按下鼠标左键开始框选矩形 if event.button() == Qt.LeftButton: self.start_pos = event.pos() def mouseMoveEvent(self, event): # 移动鼠标更新框选矩形 if self.start_pos is not None: if self.rect is not None: self.scene.removeItem(self.rect) self.rect = self.scene.addRect(self.start_pos.x(), self.start_pos.y(), event.pos().x() - self.start_pos.x(), event.pos().y() - self.start_pos.y(), self.pen) def mouseReleaseEvent(self, event): # 松开鼠标左键结束框选矩形并输出坐标 if event.button() == Qt.LeftButton: if self.rect is not None: self.scene.removeItem(self.rect) self.rect = self.scene.addRect(self.start_pos.x(), self.start_pos.y(), event.pos().x() - self.start_pos.x(), event.pos().y() - self.start_pos.y(), self.pen) print(self.rect.boundingRect().x(), self.rect.boundingRect().y(), self.rect.boundingRect().width(), self.rect.boundingRect().height()) self.start_pos = None if __name__ == '__main__': app = QApplication(sys.argv) viewer = ImageViewer() viewer.show() sys.exit(app.exec_()) ``` 在这个示例中，我们创建了一个 ImageViewer 类，并在其中添加了 QGraphicsView 和 QGraphicsScene。我们加载了一张图片并将其添加到场景中。然后我们设置了滚动条和缩放策略，并重载了鼠标事件来实现矩形框选和输出坐标的功能。最后我们创建了一个 QApplication 并展示了 ImageViewer。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值