以 Stellar JS 为中心的 CSS 背景图像

2023-12-06

我正在使用 Stellar JS 将背景图像设置为元素,并尝试实现以视差移动的居中图像。然而,当我尝试使用标准方法时,我意识到背景位置是由恒星更新的,然后恒星会覆盖居中(我假设这就是覆盖它的原因)。我创建了一个小提琴来解释这种情况。

http://jsfiddle.net/captDaylight/wvuQm/1/

有什么办法让图像保持在滚动中心吗?

(堆栈让我在这篇文章中附上代码,尽管在本例中它微不足道,但小提琴上的示例非常简单,所以我发布了一些要绕过的内容)

background: url(http://upload.wikimedia.org/wikipedia/commons/e/e5/Seine_wide.jpg) no-repeat center center; 
background-size: auto 100%;

我正在读另一本堆栈帖子关于背景位置,但是当我尝试进行更新时,它表明它似乎打破了视差。

http://jsfiddle.net/captDaylight/wvuQm/3/


您需要禁用水平视差。这将导致 Stellar.js 保持水平背景定位不变。

在您的示例中,更新后对 Stellar 的调用

$(window).stellar({ horizontalScrolling: false });

我已通过以下更改更新了您的 JSFiddle 示例:http://jsfiddle.net/wvuQm/5/

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

以 Stellar JS 为中心的 CSS 背景图像 的相关文章

  • 选择子元素但不选择孙元素

    我有以下简化的代码 div p text p div div p text p div div p text p div div p text p div 每当我设置一些值时 content pCSS 文件中的元素 更改也适用于 col1
  • 使用 CSS 更改 svg 图像的颜色 [重复]

    这个问题在这里已经有答案了 我的 html 文件中有以下 svg 图像 img class svg src my image link svg 现在 我尝试使用以下 css 代码更改颜色 svg path fill black 然而 一切都
  • 有什么方法可以声明盒子的大小/部分边框吗?

    有什么方法可以在 CSS 中声明框的大小 部分边框吗 例如一个盒子350px只显示第一个边框底部60px 我认为这可能非常有用 例子 并不真地 但以优雅降级且不需要多余标记的方式实现这种效果非常容易 div width 350px heig
  • Wkhtmltopdf 每页右侧的垂直文本

    下面是使用 wkhtmltopdf 生成的 PDF 示例 我需要在每一页的右书脊上生成文本 我尝试将其添加到标题代码中 似乎会剪辑 PDF 的正文 我正在使用 wkhtmltopdf 的页眉和页脚参数 不太确定如何或是否可以在每个页面的右侧
  • CSS 圆角六边形按钮

    我可以使用 CSS 创建相同的按钮 圆角是重要部位 角是主要原因 带圆角的三角形按钮 请看我下面的代码和图片 lngbtn position relative width 150px height 50px margin 50px colo
  • GWT - css 中常量的问题

    我是 GWT 新手 我正在构建一个小型示例应用程序 我有几个 CSS 文件 我能够成功使用 ClientBundle 和 CssResource 将样式分配给 UiBinder 脚本中定义的元素 现在我想更进一步 使用 def css ru
  • CSS3动画比例[重复]

    这个问题在这里已经有答案了 我正在尝试对 div 进行动画处理 以便在页面加载时它具有比例 0 0 并动画到比例 1 1 我遇到的问题是 一旦动画生效 div 就会再次缩放到 0 我想要的是 div 动画缩放 1 1 并保持这样 这是我的
  • jQuery / CSS3 动画阴影效果

    所以这个问题可能会被否决 但我认为有人可能会提供帮助 我正在寻找的效果是蓝色块像气球一样上下盘旋 当块上 下移动时 阴影在其下方不断增大和缩小 关于如何编程的任何想法 或者有人知道可以完成的教程 插件吗 你可以使用 jQuery 来完成 或
  • IE jquery click 仅适用于 li 中的文本,不适用于整个框

    我创建了一系列作为 li 的按钮 我希望用户能够单击它们 ul class item list li class item button style color 4bb2c5 1 li li class item button style
  • 如何像facebook和twitter一样显示帖子更新时间?

    我正在制作一个通知平台 而不是显示通知到来的时间 我想显示自通知到达以来经过的时间 就像在 Twitter 和 Facebook 上发生的那样 他们显示 32m 1 小时前等 我想用JavaScript Java来实现这段代码 任何帮助将非
  • CSS位置:绝对+动态高度

    我有 4 个 div 标签一个接一个 全在position absolute我使用它们对齐top and left 第三个 div 标签包含动态内容 并且 div 的高度根据其中的文本量而变化 然而 当我设置top and left在所有
  • 使用 Javascript/jQuery 和 CSS 更改 PNG 颜色

    我有一个黑色的心 PNG http 1 bp blogspot com yq ZSKg39Tk TOvzVx9sC5I AAAAAAAAAb0 GcN4O Ciq3s s1600 black heart png我想用不同的颜色显示 如何使用
  • 使用日期类型将输入字段中的日期居中

    我想将日期居中input not input inside div 如果我进行居中 它将把日期居中于input因为有一个右侧面板用于根据日历选择日期 该面板根据输入宽度调整大小 用于演示的小代码片段 center text align ce
  • 何时使用
    换行符 vs CSS 定位?

    我经常想知道如何正确使用 br 越线 似乎它们经常被错误地用于定位或清除应该使用 CSS 的内容 W3schoools org 说使用 br 适用于空白行 但不适用于创造或分离 http www w3schools com tags tag
  • 在这个页面中,悬停不起作用,我不知道为什么,而且页脚也没有占用 100% 宽度,即使我已经给了它

    我的编码是否不正确 或者悬停和页脚有什么问题 我需要知道 php 邮件程序是正确的还是我有错误 我无法找到错误 因为邮件功能在本地服务器上不起作用
  • 如何在 Chrome 中实现抓取光标图标?

    我知道可以在 Chrome 中使用抓取光标图标 当然是在 Gmail 中 但我不知道如何在我的代码中实现它 我已经尝试过 在CSS中 body cursor grab body cursor webkit grab body cursor
  • scrapy获取同一个类的第n个子文本

    我附上了一张照片 我面临的问题是获取同一类的第一个元素 我想得到 adxHeader gt adxExtraInfo 1st one gt adxExtraInfoPart 1st one gt a text 我编写了以下代码但不起作用 任
  • JSDoc:如何在生成的文档中包含自定义 css 文件模板?

    JS文档docs https jsdoc app about configuring default template html say 将图像目录复制到输出目录 复制全部 将 myproject static 中的静态文件复制到输出目录
  • 具有固定高度、自动宽度并保持比例的图像

    我有一个反应灵敏的ul列表 其中每个li是 50 ul宽度 每一个li 我有一个图像 我想要固定的高度和 100 的宽度 保持图像的比例 例如通过缩放 请问我该怎么做 ul width 100 li width 50 float left
  • 使用 JavaScript 从 URL 变量读取来加载不同的 CSS 样式表

    我试图在我的 WordPress 博客上使用两个不同的样式表 以便在通过 Web 访问页面时使用一个样式表 而在通过我们的 iOS 应用程序访问博客内容时使用另一个样式表 现在 我们将 app true 附加到来自 iOS 应用程序的 UR

随机推荐

  • 在 JavaScript 中获取 CSS 类名

    我面临着从 JavaScript 中的字符串获取类名的问题 例如 var ddd p class Box title Heading text here p 现在我想从中获取 p 标签的类名 浏览器擅长 HTML 解析 setup var
  • 如何获取 kivy 按钮的 Id 和 Text 值作为字符串?

    我有一个带有多个按钮的应用程序 我需要在按下按钮时以字符串形式获取按钮的 id 和文本值 然后 抓取的按钮 ID 和文本值将被传递到另一个函数以进行进一步处理 为了简单起见 我编写了这个示例程序 main py from kivy app
  • ZMQ ROUTER中的客户端维护

    ZeroMQ ROUTER 套接字如何在内部维护其客户端连接 该指南称每个客户都会获得一个唯一的 ID 但并不清楚 什么算作客户端 每台机器不同的客户端或每个连接的应用程序不同 从客户端收到的请求数量是否有限制 原因是 我正在对这段代码进行
  • 图像比较并返回百分比

    int DiferentPixels 0 Bitmap first new Bitmap First jpg Bitmap second new Bitmap Second jpg Bitmap container new Bitmap f
  • Angular:承诺内的异步等待 - 事件监听器

    从一天起我就一直在这个问题上苦苦挣扎 我想创造这样一种情况 img 在 component ts 文件中我只想包含这一行 this userdp this userService getUserDp 在 getUserDp 中 代码如下 a
  • 如何重新标记 matplotlib 热图的轴刻度

    我正在关注这个例子生成热图 是否可以重新标记 X 轴上的值 并向其添加一个常量 例如 我希望 X 轴上的数字不是 0 1 2 3 4 而是 5 6 7 8 9 您可以使用关键字参数来标记 x 轴和 y 轴extent在致电imshow 这是
  • 如何从Python列表中生成所有可能的排列对? [复制]

    这个问题在这里已经有答案了 如何从 Python 列表中生成所有可能的对排列 Example input 3 8 2 output 3 8 3 2 8 3 8 2 2 3 2 8 您可以使用itertools permutations im
  • 带有 CTE 的 BigQuery UPDATE 语句

    正在寻求有关 BigQuery 的帮助 我似乎无法在 UPDATE 语句中使用 CTE 即 with ctename as select column1 column2 column3 from blah update table2 set
  • 如何禁用引导列中的垂直滚动

    我有两个引导列 左 和 右 我想用屏幕修复左栏并禁用滚动 但我想在右列中启用滚动 这将有更多内容 基本上我想显示帖子 使帖子标题显示在左列中 帖子内容显示在右列中 完全相同this 注 我用过overflow y hidden 但没有成功
  • 在主题中使用 fontFamily 属性时,Toast 会抛出 ArrayIndexOutOfBoundsException 和 appcompat v26

    每当我展示一个Toast 应用程序崩溃 如果我使用旧版本的 AppCompat 库或删除该应用程序 则该应用程序可以正常工作fontFamily从风格上 创建时 Override protected void onCreate Bundle
  • 在 Dataobject 中提交表单 - Silverstripe 3.1

    我正在使用 Aram 的 DataobjectAsPage 模块 现在我想在每个 DOaP 站点上都有一个表单 我在我的数据对象中创建了这样的表单 public function RegistrationForm fields new Fi
  • 获得mysql中每个人第二高的工资

    我们有如下表 person id salary 1 1500 1 1000 1 500 2 2000 2 1000 3 3000 3 2000 4 3000 4 1000 我们希望每个人的薪水都是第二高的 按每个人分组并获得第二高的工资 像
  • 不同实现之间的随机输出不同

    我已经用 libstdc libc 和 dinkumware 尝试过这个程序 include
  • 重新排列 SimpleCursorAdapter 中的列表视图项目

    我有一个数据库 SQLite 然后使用 SimpleCursorAdapter 将值显示到列表视图中 但是 我想重新排列列表视图项目并显示以 ID 1 开头的项目 然后显示 ID 号 2 的项目 依此类推 问题是 我无法理解基于重新分配列表
  • 如何将xpath的值放入html img标签中

    以下代码为我提供了适当的字符串 但我不知道如何将该值放入 html img 标签中
  • 将 Apache Cassandra 与 Apache Ignite 集成

    我正在尝试将 Apache Ignite 与 Apache Cassandra 3 11 2 集成 因为我想使用 Ignite 缓存现有 Cassandra 数据库中存在的数据 在浏览了在线资源之后 到目前为止我已经完成了以下工作 已下载阿
  • 仅指定操作时如何将一个控制器设置为默认控制器?

    我正在使用 MVC 2013 中的标准 MVC 模板 有一个Home具有 关于 联系 等操作的控制器 有一个Account具有登录 注销等操作的控制器 该应用程序部署在域中website 网址http 网站将产生 Home Index 的输
  • 在javascript中将十六进制颜色转换为整数

    我正在尝试将十六进制颜色字符串转换为 JavaScript 中的 int color int 必须与 VB6 的格式相同 我认为字节顺序不正确 例如 255 是红色 ff0000 16776960 是水色 00ffff 我有一个函数可以做相
  • C:传递(双重)赋值

    我在 C 中使用过这样的构造 list gt head list gt tail NULL 现在我考虑这是否真的如我所想 这是什么意思吗 list gt head NULL list gt tail NULL or list gt head
  • 以 Stellar JS 为中心的 CSS 背景图像

    我正在使用 Stellar JS 将背景图像设置为元素 并尝试实现以视差移动的居中图像 然而 当我尝试使用标准方法时 我意识到背景位置是由恒星更新的 然后恒星会覆盖居中 我假设这就是覆盖它的原因 我创建了一个小提琴来解释这种情况 http