在没有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的情况下更改页面滚动时的背景颜色? 的相关文章

  • 背面可见性在 Firefox 中无法正常工作(在 Safari 中工作)

    我的背面可见性属性有问题 它在 Safari Chrome 中按照我想要的方式工作 但由于某种原因它在 Firefox 中无法正常工作 当盒子翻转时 我得到了正面的镜像 这个错误已经被得到 Mozilla 的认可 https bugzill
  • 如何隐藏其他选项卡的内容并仅显示所选选项卡的内容

    当我单击特定选项卡时 其他选项卡的内容应该隐藏 但它并没有隐藏 这是我所有的代码 function showStuff id if document getElementById id style display block documen
  • 多列定义列表[重复]

    这个问题在这里已经有答案了 我有一个 dl 像这样 dl dt Quantity dd dt Size dd dt Rise dd dt Color dd dd dt dd dt dd dt dd dt dl 该列表是通过 php 动态生成
  • stripe checkout css内容策略错误

    我正在尝试创建一种形式条纹结账 https stripe com docs checkout在我的 Ionic 应用程序中 我创建了一个指令 将表单植入到我的内容视图中 但是当我运行它时 CSS 因违反内容策略而失败 checkout js
  • Li向左浮动,长度动态:最后一行无边框底部

    情况如下 https jsfiddle net rpepf9xs https jsfiddle net rpepf9xs 我想用选择器 nth last child 删除边框底部 但是 如果列表中只有8个 li 则会出现如下错误 ul di
  • @Font-face 不适用于 IOS

    我正在开发一个 WordPress 网站 并且在每个页面上都有一个 H1 标签作为该页面的标题 我正在使用 font face 的特殊字体 它在每个浏览器的 Windows 上都运行良好 但是当我切换到 Mac 时 它不会显示 h1 标签
  • :hover 状态在 iOS 上不会结束

    我有一个带有悬停状态的简单菜单
  • overridePendingTransition 显示第二个活动的速度太快

    我有 2 个活动 我想在两个活动之间创建一个动画过渡 以便两个活动的视图向上滑动 就好像第二个活动正在向上推动第一个活动一样 在我的第一个活动中我使用 Intent iSecondActivity new Intent FirstActiv
  • 导航栏折叠在 Bootstrap 中不起作用

    Bhanu pratap 解决了这个问题 在这个问题的末尾检查一下 我一直在遵循旧的路线来构建导航栏折叠 三明治 问题是课程中的页面顶部似乎有一个黑条 并且缩小页面时会出现导航栏 对我来说 我只需在左侧找到一个按钮 另外 当我缩小页面时 我
  • 监听浏览器宽度以进行响应式网页设计?

    我正在努力使我的网站适合移动设备 我想知道浏览器窗口的大小 以便当它比 728px 窄时我可以执行某些操作 而当它大于 728px 时我可以执行其他操作 这必须考虑到调整 PC 上的窗口大小以及在手机中从纵向模式更改为横向模式 如何才能做到
  • div Hello div div Howdy dere pardner div div div 我明白它的作用 但为什么叫这个名字both 什么是both mean 两者的意思是 一组两件事中的每一项 左 和 右 两件事
  • 如何修复“没有这样的文件或目录,lstat 'scss/'”?

    我正在尝试遵循 youtube 上的简单教程他尝试使用终端运行 npm 脚本 sass 文件 当我执行命令时npm 运行 sass显示错误消息错误 ENOENT 没有这样的文件或目录 lstat scss 我认为问题在于文件的路径或文件的权
  • 可以将position:absolute元素设为粘性吗?

    In CSS position sticky使元素能够显示position static行为 即 它采用文档流中的默认位置 直到到达某个滚动位置 然后采用position fixed行为 那么 这是否意味着我们不能使用position st
  • 无法正确显示行

    我应该在这个问题的开头说我完全没有 html css javascript 背景 所以请对我宽容点 如果我使用了错误的术语或者问了一个愚蠢的问题 没有提供足够的信息 请抱歉 我正在尝试让一个可扩展的表工作 通过阅读论坛线程 教程 将 nex
  • 理解 z-index:该元素如何出现在其父级同级元素的前面?

    为什么当我删除时红色 div 位于绿色 div 前面z index from wrapperRed 感觉像z index是沿着链条向上继承的 如果我改变z index将绿色 div 更改为 6 即使删除第一句中描述的行后 它仍保留在红色 d
  • html 电子邮件内的背景图像 css - Gmail 不支持

    我想向我的用户发送如下所示的带有背景图像 css 的 html 正文电子邮件 div style width 500px height 1000px background color black background image none
  • CSS 到底如何计算相对尺寸

    我想更好地理解某些 CSS 行为 这与具体问题无关 我只是在调试网站时遇到的 让我们在固定位置的 div 中放置一个全宽图像 div img style width 100 src https via placeholder com 150
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • 具有 100% 高度行和 Internet Explorer 9 的表格

    我有以下示例 div style height 150px background color AAAAFF div
  • 使用 CSS 折叠和展开元素

    我正在尝试构建一个页面 加载时仅可见标题 并且 当用户单击标题时 每个标题下方的表格会在隐藏和显示状态之间切换 我的限制是只能在 CSS 中执行此操作 这是我到目前为止想到的 https jsfiddle net Argoron c1ypx

随机推荐

  • 如何处理 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 上崩溃