背景附件的替代方案:固定

2023-12-14

由于background-attachment:fixed在某些移动浏览器上不起作用(例如在iOS上),有哪些替代方案,特别是在尝试实现以下演示时:http://cppforums.ludost.net/test/test.html

CSS:

.sec1 { 
  min-height: 1000px;
  background: #222 url('wallpaper-2959361.jpg') no-repeat center top fixed;
}

.sec2 { 
  min-height: 1000px;
  background: #222 url('wallpaper-1829278.jpg') no-repeat center top fixed;
}

HTML:

<div class="sec1">text</div>
<h1>Title 1</h1>
<div class="sec2">more text</div>
<h1>Title 2</h1>
<div class="sec1">even more text</div>

关于如何以适用于所有浏览器的方式实现演示有什么建议吗?最好是纯 CSS 解决方案。


    .bg 
    {
      background-image: url(bg.jpg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: fixed;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      z-index: -1;
      -webkit-transform: translateZ(0);
      pointer-events: none;
    }

看这个例子:https://rawgit.com/arnaudbreton/background-fixed-chrome-rendering-issue/master/index-without-rendering-issue.html

取自:http://blog.mention.com/building-a-beautiful-homepage-how-we-nailed-down-chrome-performance-rendering-issues/

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

背景附件的替代方案:固定 的相关文章

随机推荐

  • 简单的 .htaccess 子域重写

    我知道这里有很多关于此的问题 但现在我感觉就像一头被迎面而来的车灯惊呆的鹿 我只是不知道从哪里开始以及选择哪个选项 我的要求很简单 用户前往http application domain com or http www applicatio
  • 将会话传递给 TWIG 模板

    当我想要得到时我遇到了问题 SESSION session 在使用 slim micro Framework 的树枝模板中 这是我的代码 p welcome p
  • 如何通过 Chromecast 上的接收器应用程序获取序列号

    我正在 Chromecast 上开发一个接收器应用程序 我想使用序列号来限制同时在多个设备上查看 如何通过 Chromecast 上的接收器应用程序获取序列号 我在开发者指南中找不到它 序列号不会以编程方式公开
  • 如何动态设置 IFrame 的源?

    我有一个嵌入 YouTube 视频的 IFrame 我想创建一个文本框 用户 管理员 可以在其中粘贴新的视频源 URL 并且 IFrame 获取新源 这是我到目前为止所拥有的 protected void Edited Click obje
  • phpMyAdmin:日期字段显示为 BLOB

    我正在运行 phpMyAdmin 版本 4 4 4 浏览表时 所有 DATETIME 和 DATE 字段都显示为 斑点19 我单击了表格列表上方的 Options 选择 显示 BLOB 内容 并单击 GO 但是所有日期字段仍显示为 BLOB
  • 如何使用Camera API实现慢动作和延时视频录制

    有没有办法使用Camera API实现慢动作和延时录制 我尝试使用MediaRecorder环境VideoFrameRate VideoBitRate VideoCaptureRate但对我来说没有任何作用 我已经成功地使用 JNI 实现了
  • 将矩阵中的 0 替换为 NA

    用 NA 替换矩阵中的所有零的最有效方法是什么 我做什么 my matrix my matrix 0 lt NA 我需要它用于推荐系统 推荐实验室 填充 NA 与构建推荐系统的时间相同 EDIT 1 暗淡 my matrix 500000x
  • 罢工行为

    int main char str kk 12 23 4 3434 3 33 char valarr int count 0 valarr strtok str while valarr 0 valarr strtok NULL count
  • Python,mysql.connector 错误:没有可从中获取的结果集; cgitb 显示传递给函数的正确值

    好吧 这个让我感到困惑 所以我决定看看是否可以在这里找到答案 我上下搜索了几个 stackoverflow 问题和答案 但似乎没有任何效果 我想做的就是使用 mysql connector 执行 SELECT FROM 语句 但我不断收到
  • knockoutjs 数据绑定与 jquery-ui datepicker

    我正在使用一个jQuery用户界面日期选择器 它后面的 HTML 输入字段当前连接到淘汰赛作为 dependentObservable 但是当在视图模型中设置其值时 日期选择器会丢失其格式 我应该如何做而不丢失格式 我希望 viewMode
  • 无法连接到 ASP.Net 开发服务器问题

    我正在调试Codeplex简单项目 我在用 2008年VSTS C Windows Vista x86 企业版 我没有修改这个codeplex项目的任何代码 只需按F5即可运行VideoPlayerWeb项目 我当前遇到的问题是错误消息 无
  • 当应用程序处于后台时 Android 通知

    我正在从 google firebase 为我的 android 应用程序发送推送通知 目标为 Android 5 0 我的推送通知代码是 Override public void onMessageReceived RemoteMessa
  • Eclipse 插件中动态生成的 TestNG 测试的名称

    我使用一个动态生成的 JUnit 测试套件转换为 TestNG Factory注解 测试是通过扫描包含多个测试规范文件 以 DSL 编写 的目录并将它们加载到知道如何执行它们的测试类中来生成 的 测试类有一个 Test方法名为test 实现
  • php preg_replace 为 Unicode 字符

    我有一个类似这个问题的问题 php 预替换 在这个问题中 他 她只想允许字母 数字和 但我只想允许数字 字母和Unicode 非拉丁语 字母和数字 我想 我应该使用这个的 Unicode 值 例如U 1F70 我能做些什么 谢谢 您应该使用
  • 如何使用 Bluebird.js nodeify 将第三个参数传递给回调

    在一点帮助下我已经得到以下代码来承诺Passport js 登录策略 var passport require passport var LocalStrategy require passport local Strategy var P
  • Magento:SQLSTATE [42000]:语法错误或访问冲突:1044 用户'DBUSER'@'%'对数据库'DBNAME'的访问被拒绝

    几个小时以来 我一直在为这个问题而苦苦挣扎 有人可以帮忙吗 我在网上找不到任何有关它的信息 我已经安装了最新版本的 magento 并添加了一些商店和简单的产品 在尝试将关联产品添加到可配置产品之前 一切似乎都工作正常 它允许我添加可配置产
  • 在 IIS 7 上使用 HttpHandler 取消请求验证

    我有一个应用程序必须处理在其 URL 中获取 特殊 字符 如 等 当我使用这些字符向应用程序发送请求时 当然我发送的是转义字符 我收到 错误请求 响应代码 并显示消息 ASP NET 在 URL 中检测到无效字符 跟踪请求表明错误是从 身份
  • PHP5.3.0 的 Pear 错误消息

    当我在 WAMP 服务器上打开新安装的 PEAR 包时 出现很多错误 这是错误消息 我能做些什么 Deprecated Assigning the return value of new by reference is deprecated
  • 基于 ngx.re.match() 添加自定义标头

    我正在尝试添加基于的自定义标头uri值 在这种情况下对于所有pdf files header filter by lua block local m err ngx re match ngx var uri pdf io if m then
  • 背景附件的替代方案:固定

    由于background attachment fixed在某些移动浏览器上不起作用 例如在iOS上 有哪些替代方案 特别是在尝试实现以下演示时 http cppforums ludost net test test html CSS se