在没有jquery的情况下更改页面滚动时的背景颜色?

2023-12-05

我试图让过渡工作,以便背景颜色根据页面/即位置淡入另一种颜色。由具有相同类的div触发。 在这里找到了一些js(http://codepen.io/Funsella/pen/yLfAG)它在桌面上完全按照我想要的方式工作,但它在 iPad 上崩溃(无论浏览器如何)。

有人知道如何用 CSS 进行这种转换吗?

我发现但它是由悬停触发的..

例如..http://jsfiddle.net/L9JXG/1/

.div1 {
    height:200px;
    width:600px;
    position:relative;
    background:red;
}
.div1:after {
    position:absolute;
    width:100%;
    height:100%;
    content:'';
    background:url("http://lorempixel.com/output/business-q-c-640-480-10.jpg");
    background-size:cover;
    opacity:1;
    transition: 3s;
}
.div1:hover:after {
    opacity:0;
}

您必须设置合适的断点。这里有一个很棒的resource对于这个问题。

一个独立的script更改用户滚动的页面背景

Demo

这是脚本的下载链接http://download.techstream.org/Change-Page-Background-on-Scroll.zip(点击后就会开始下载)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在没有jquery的情况下更改页面滚动时的背景颜色? 的相关文章

  • 如何在鼠标悬停时覆盖 div / box?

    我有一个链接 当用户将鼠标悬停在其上时 它应该在链接下显示一个框 div 盒子应该覆盖其下方的所有内容 我如何使用 css 或 javascript 来做到这一点 您有一个隐藏的绝对定位的 div 和链接的子级 然后 当您将鼠标悬停在链接上
  • Safari 10.0.1 未从 srcset 选择正确的图像

    Safari 无法正确处理我网站上某些图像的 srcset 并且完全忽略我在尺寸属性中设置的规则 如果您单击下面的链接并在 Safari 中查看它 您将看到顶部的图像以其原始尺寸显示 而不是我生成的尺寸 但是 在页面底部它有效吗 并已下载为
  • 使用 Bootstrap 3 具有固定高度、标题和列宽度的表格

    我想要一张具有以下功能的表 固定标题 固定高度 带有可见的滚动条 3个固定宽度的列 一个大列和两个窄列 我开始使用 tbody display block overflow auto height 100px 为了至少获得固定高度 但此规则
  • HTML - 使用 JS 根据值更改文本颜色

    我正在使用 Django 创建一个以 HTML 形式显示的表格 我想当数字为负数时将数字的颜色更改为红色 当数字为正数时将数字的颜色更改为绿色 我知道我需要使用 JS 来实现这一点 但我无法让它工作 任何帮助将不胜感激 这是我的 Djang
  • 使用尾随与号 (&) 作为类组合选择器,而不是后代选择器

    我想申请一个班级 highlight到一堆不同的元素并根据元素类型设置它们的样式 我可以这样做 input type text highlight select highlight someOtherSelector hightlight
  • 如何修改primeng p日历样式?

    我正在尝试修改 primeng p calendar 但它无法正常工作 例如 我希望它是这样的 需要的改变 https i stack imgur com QBXoh png 但原来它看起来像这样 原始图像 https i stack im
  • 背景 CSS 图像仅在 IE7 中不显示

    html 是 div class choose os p a href someLink class windows Microsoft Windows a a href someOtherLink class macos Apple Ma
  • a:active 不起作用

    我在这里很困惑 the a active不工作 但是 hover工作正常 我已经尝试了很多事情 但这个让我陷入困境 而且真的很令人困惑 我刚刚在表中添加了链接 我已将单元格添加到了类中 menu1 现在 当我访问活动页面时 活动链接不会突出
  • 在每个打印页上重复水印? JavaScript 或 CSS

    所以 我有这个发票页面 我正在页面后面添加水印 我需要为要打印的每一页重复水印 问题是 我不知道会有多少页 可以有任意数量的页面 我需要在每个页面后面显示水印 这些图像取自 Google Chrome 的打印模式 这是该页面的 html 你
  • jquery覆盖加载栏div

    所以我有一个数据表 并且我正在使用 ajax 获取数据 当检索数据时 表中的数据消失并出现一个小的加载圆圈 我希望数据保留 我知道如何做到这一点 并且加载圆圈出现在表格的中心 不一定是垂直的 至少是水平的 以及稍微透明的背景阻挡稍微超出表格
  • 多列定义列表[重复]

    这个问题在这里已经有答案了 我有一个 dl 像这样 dl dt Quantity dd dt Size dd dt Rise dd dt Color dd dd dt dd dt dd dt dd dt dl 该列表是通过 php 动态生成
  • 将单选按钮放置在图像上

    我试图在图像上的确切位置放置一些单选按钮 我已将两者都放在 Div 中 但我不知道下一步该怎么做 这是我想要放置单选按钮的位置 红色圆圈 到目前为止 这是我的代码 center display block margin left auto
  • 当鼠标悬停在链接上时,如何在链接旁边创建弹出框?

    这是我想要实现的 我的网页上显示了两个超链接 a href http foo com foo a a href http bar com bar a 我还有两个对 div 链接的描述 div foo means foo div div ba
  • 设置overflow-y可见,而overflow-x为auto,以便内容可以垂直溢出父容器

    我在用着position absolute and position relative如果将其父级悬停在图像上 则在图像上显示文本 文本和图像父 div 所在的容器设置为overflow x auto 使其具有水平滚动条 我想要看起来垂直溢
  • :hover 状态在 iOS 上不会结束

    我有一个带有悬停状态的简单菜单
  • 具有最大高度和滚动的动态内容的对话框+页脚CSS

    我有一个dialog with 位置 绝对 and a 最大高度放 这最大高度财产是set从外面by a javascript框架 jQuery UI 对话框 所以我无法控制它 里面有 2 个 div 其中一个充满了动态内容 and a 静
  • 有 CSS 父选择器吗?

    我该如何选择 li 元素是锚元素的直接父元素 举个例子 我的 CSS 应该是这样的 li lt a active property value 显然 有多种方法可以使用 JavaScript 实现此目的 但我希望 CSS Level 2 本
  • 使用JQuery检查元素是否有边框?

    所以我正在玩 el css 尝试确定元素是否有边框 我用 css border style solid 设置边框 这是可行的 但实际上它设置了 4 种单独的样式 border right style border left style bo
  • 如何在表格的 tbody/thead 部分周围创建边框?

    我正在尝试创建一个包含表格数据的页面 该页面必须显示为多个表格 然而 我有两个相互冲突的要求需要解决 每个表格周围都必须有边框 每个表格的列宽必须能够根据内容重新调整大小 但是 所有表中的列宽必须一致 即列的大小基于所有表中该列中最大的单元
  • 删除

    好的 我有一个小菜单栏 菜单内的三个元素还有更多的子菜单 但是菜单栏中的元素之间有不必要的间距 而且我创建的子菜单有不必要的背景宽度 我在代码中将其涂成白色以使读者理解 由于这种不必要的宽度 即使鼠标悬停在不可见的宽度上 在本例中为白色 本

随机推荐

  • 如何处理 callableStatement.registerOutParameter(1, java.sql.Types.BOOLEAN);

    Oracle 10g 11g 中有一个存储过程 如下所示 CREATE OR REPLACE PROCEDURE SP SOME PROC PRM ID IN NUMBER START DATE IN DATE RESULT OUT BOO
  • 将输入字段移动到跨度顶部

    我有一个跨度作为我的输入字段的标签 选中后 标签将位于输入字段上方 我的问题是 当您尝试单击输入字段时 标签位于输入字段的 前面 并阻止您选择它 我尝试使用 z 索引修复它 但这似乎不起作用 有人可以帮我将输入字段放在跨度前面吗 input
  • ASP CustomValidator,错误后前进到回发

    我有一个 ASP NET 页面 其中包含 ASP 验证器 必填字段 正则表达式等 以及用于附加验证的 Java 脚本函数 例如 检查第二个日期是否大于第一个日期等 我通常这样做
  • 下载mp3文件并存储在应用程序目录中

    在我的 Android 项目中 我需要以编程方式从 google 驱动器下载网址下载 mp3 文件并将其存储在应用程序沙箱中 然后 应用程序可以有播放选项在本地播放该音频 如何实现从服务器下载 mp3 文件并将其本地存储在应用程序中 稍后
  • 如何使用 SSIS 包中的 Foreach 循环容器选择最近创建的文件夹?

    我在 SSIS 方面遇到了一个有趣的挑战 使用 for each 文件枚举器 我需要选择最近创建的子文件夹 然后迭代每个文件 也许举个例子会更好地解释 这些文件夹看起来像这样 c 数据 2011 0703 c 数据 2011 0626 c
  • Python file.tell 给出错误的值位置

    我正在尝试使用 Python 从现有文件中提取多个位置 这是我当前用于提取位置的代码 self fh open fileName r p re compile regGen regPorSnip begin for line in self
  • 根据屏幕分辨率更改表单的分辨率(不更改显示器分辨率并使用最大化屏幕选项)

    我在论坛上进行了搜索 并尝试了一些方法 但它们似乎并没有真正起作用 让我列出我的问题 我的笔记本电脑的屏幕分辨率非常高 1400x1050 我正在以此为基础设计我的应用程序 我的同事在他的笔记本电脑 分辨率较低 上进行了尝试 但该应用程序不
  • 纸浆得到的结果是问题不可行,而问题不可行

    我正在尝试用纸浆解决作业问题 代码的基本部分如下 set I range 1 numberOfPoints set J range 1 numberOfCentroids tau 0 15 Q 15 decision variable x
  • pip 不会安装 .WHL 文件

    当我尝试通过输入 cmd 从 gohike 安装任何 WHL 时C Users owner Downloads gt pip install TA Lib 0 4 9 cp27 none win amd64 WHL我得到这个打印出来 Pro
  • 调用方法时出错。无法启动 JVM - 本机包将构建但无法启动

    谁能更具体地说明我的问题所在以及如何解决它 我在跑 Windows 7的 Eclipse Mars 2 版本 4 5 2 我已经反复严格按照 Marco 的 code makery ch 教程 code makery ch library
  • 即使设备使用 WiFi,iOS 也会检查蜂窝技术是否可用

    这里需要一些帮助 我需要检测 iOS 设备是否 在某个时刻 具有蜂窝功能 无论是哪一个 我尝试使用可达性类别 但当用户连接到 WiFi 时问题就开始了 因为如果是这样的话 可达性无法检测到蜂窝网络 我也尝试使用这段代码 CTTelephon
  • 了解 jquery 回调

    我很难理解 javascript 回调应该如何工作 我使用以下代码从 MySQL 数据库获取值 post getResults php x 100 y 200 function arrayOfValues alert arrayOfValu
  • PHP 中字符串的每个单词都大写吗?

    据我所知 strtolower 使字符串全部小写 而 ucfirst 使字符串的第一个字母大写 我想问一下 是否可以将字符串中的每个单词都大写 示例 string hello world 如何使其显示为 Hello World 您正在寻找u
  • 带突出显示的 QML 嵌套列表视图

    我需要创建嵌套列表视图 如下所示 并用不同的颜色突出显示主列表和子列表 我尝试过使用 ListView 突出显示 但存在诸如显示子项和父项的突出显示之类的问题 如图所示 下图 我正在使用来自的代码here有一些小的修改 这是完整的代码 im
  • tkinter 在 for 循环中创建可点击标签[重复]

    这个问题在这里已经有答案了 我想在 for 循环中创建多个可点击标签 标签的结构类似于网格 具有 row 和 col 属性 如果我单击标签 则应使用 print it 函数打印单击标签的行和列 问题是 如果我单击任何标签 在这种情况下输出始
  • 在等待输入python时更新turtle/gui

    我正在制作一个聊天程序 但遇到一个问题 屏幕仅在输入后更新 我正在使用turtle来显示聊天 我知道 turtle对于这个目的来说并不是那么好 但它非常简单 这是我循环中的代码 while True ind userlist index u
  • 模拟器上的 Ionic3(Angular4) CORS

    我正在 genymotion 模拟器上测试 Ionic 3 应用程序 顺便说一句 由于 CORS http 请求不起作用 我以为服务器有问题 但我用ionic 2应用程序检查后确认服务器没有问题 Ionic 3 应用程序的 Http 请求在
  • 根据所选国家,需要填充州和城市

    HTML
  • 防止反应悬念隐藏内容

    我用谷歌搜索 观看了很多视频来实现类似 YouTube 加载的功能 如下面的屏幕截图所示 因此 我有基于路线的导航 其中有延迟加载 因此一切正常 但在加载内容时 反应悬念将使组件显示 无 因此它在屏幕上变得不可见 只有后备组件可见 我想让内
  • 在没有jquery的情况下更改页面滚动时的背景颜色?

    我试图让过渡工作 以便背景颜色根据页面 即位置淡入另一种颜色 由具有相同类的div触发 在这里找到了一些js http codepen io Funsella pen yLfAG 它在桌面上完全按照我想要的方式工作 但它在 iPad 上崩溃