- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
希望有人能帮我解决这个问题:
我正在开发一个单页布局网站,其中包含一些关键帧动画和几个固定的背景图像,当您向下滚动时,这些图像会被覆盖。
奇怪的是(或不是),我无法管理背景附件:已修复以使用关键帧动画:
<style>
.container{with:300px; height:400px}
.scaleAnimation {
width:300px;
height:300px;
background-color:blue;
-webkit-animation: scale 6s ease 3 normal;
background-image:url("http://tympanus.net/Development/FullscreenLayoutPageTransitions/images/3.jpg");
margin-bottom:20px;
}
.mask {
background-attachment:fixed;
position:relative;
width:400px;
height:300px
}
.mask1 {
background-image:url(http://tympanus.net/Development/FullscreenLayoutPageTransitions/images/1.jpg);
background-position: 0px 0px;
background-repeat: no-repeat;
}
.mask2 {
background-image:url(http://tympanus.net/Development/FullscreenLayoutPageTransitions/images/2.jpg);
background-position: 0px 0px;
background-repeat: no-repeat;
}
@-webkit-keyframes scale {
from {
-webkit-transform: scale(1.1);
}
to {
-webkit-transform: scale(1);
}
}
</style>
<div id="wrapper">
<div class="container">
<div class="scaleAnimation"></div>
</div>
<div class="container">
<div class="mask mask1"></div>
<div class="mask mask2"></div>
</div>
</div>
示例:http://jsfiddle.net/fpuLR/2/
如果我删除动画,背景附件工作正常:
.scaleAnimation {
width:300px;
height:300px;
background-color:blue;
-webkit-animation: scale 6s ease 3 normal;
background-image:url("http://tympanus.net/Development/FullscreenLayoutPageTransitions/images/3.jpg");
margin-bottom:20px;
}
示例:http://jsfiddle.net/fpuLR/3/
知道为什么会这样吗?
提前致谢,库特罗
最佳答案
这不是最优雅的解决方案,但这是我在遇到与您相同的问题时想到的 - 抱歉,已经晚了几个月,您可能从来没有解决过这个问题,但这个问题没有得到解答,所以我想我' d 至少试一试。
据我所知,当使用 CSS 动画/关键帧时,固定元素会“损坏”。我尝试将相同的动画/关键帧(因为我使用的是关键帧)应用到我遇到问题的 div - 并且固定定位有效!然而,它似乎只是在应用相同的动画时保持其固定位置。
在我的例子中,当页面加载时我正在淡入图像,所以我使用了这个:
.fadeIn-Delay-2s {
-webkit-animation-delay:2s;
-moz-animation-delay:2s;
-o-animation-delay:2s;
animation-delay:2s;
}
.fadeIn-3s {
-webkit-animation-duration:3s;
-moz-animation-duration:3s;
-o-animation-duration:3s;
animation-duration:3s;
}
.fadeIn {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
-o-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
我的解决方案是对其应用相同的动画,但将持续时间设为 0.01 秒。它为我解决了这个问题,直到我找到不同的东西或找到一个 jquery/javascript 解决方案来提供与 CSS 动画提供的相同平滑度,我会坚持这个。
关于html - 关键帧动画和背景附件 : fixed issue on webkit,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16243586/
我没有上传附件以使浏览器正常工作。 一些提示是 here , 其他 there . The docs非常好,但我无法将其转换为 AJAX 上传。 我正在寻找一个 super 简单的 HTML/Java
我有一个应用程序可以收集一些信息并允许用户使用 Android 的 Intent 框架共享这些信息。 到目前为止,它以纯文本形式共享报告:使用 putExtra(Intent.EXTRA_TEXT,
我正在尝试通过我的应用程序发布带有附件图片的消息,所以我使用了以下代码: function yamPost(mytoken) { var msg_Body = jQuery("#myB
我在用户表中使用了多对多关系来使登录用户关注另一个用户,但我自己没有弄清楚,我检查了其他人做了什么,并尝试做类似的事情,并且它有效。在我的方法中,我有: function follow(User $u
我正在用 PHP 创建脚本,其作用是将 IMAP 服务器备份到 MySQL 数据库。 我现在的问题是: 如果电子邮件有附件,附件是嵌入在电子邮件本身中还是服务器上的一个单独文件? 我问的原因是: 我可
我正在使用 RavenDB,在我处理任何附件之前删除了一些带有附件的测试文档,所以我在想它们是否还在磁盘上的某个地方,以及如何轻松地找到它们?。 另一个问题是:当文档被删除时,它有一个附件,附件会被自
当您使用 ACTION_SEND Intent (使用额外的 EXTRA_STREAM)将文件附加到电子邮件时,电子邮件应用程序是否将该附加文件复制到它自己的位置?我的应用程序创建了一个文件并将其附加
所以: // Setup mail class, recipients and body $mailer->AddAttachment('/home/mywebsite/public_html/fil
您好,我需要一个 DnD 解决方案来将 Outlook 邮件附件拖到 Stackpane。 JavaFX/展望 2010 stackpaneDragAndDropZone.setOnDragO
我尝试制作一个 PhpSpreadsheet 文档,然后将他添加到邮件附件中。也许是太热了,但在 phpSpreadsheet 文档中几个小时后,我还没有找到任何东西。 这是我发送邮件的文件 $nam
有什么方法可以动画删除 UITableView 单元格附件吗? 我当前正在显示一个 UITableViewCellAccessoryDisclosureIndicator,但我想在所有可见表格单元格上
我正在编写一个 iPhone 应用程序,它要求我以编程方式发送电子邮件附件。附件是我通过代码创建的 csv 文件。然后,我将文件附加到电子邮件中,附件就会显示在手机上。但是,当我向自己发送电子邮件时,
我正在尝试通过收件箱中的名称“MacroEnabled”访问子文件夹,找到其中的所有附件并将它们保存到本地驱动器。 我使用此代码创建一个名为“Documents”的文件夹并保存附件。然而,在进行第二次
将 corda 升级到版本 4 后,我收到 net.corda.core.transactions.MissingContractAttachments:找不到 com.template.contra
我正在尝试让 Jenkins 将一个或一组文件附加到作业已完成的电子邮件通知中。我不断收到以下错误: 发送电子邮件以触发:成功错误:访问要附加的文件时出错:需要 Ant GLOB 模式,但看到 C:\
我创建了一个由来自 mysql 的数据填充的 UITableView(使用 NSJSONSERIALIZATION)。现在问题是一回事。我检索到的是产品名称。我想要一个附件 View (像单元格右侧的
我开发了一个 Java 客户端应用程序,用于下载我自己的电子邮件。我发现我无法在电子邮件中找到某些附件,特别是当我向经过认证的公司发送电子邮件时收到的作为收据的 XML 文件。我用于下载附件的代码:
我正在将我的 sqlite 数据库转换为 Couchdb。我可以转换数据库并上传到 Couchdb 服务器。除了图像之外的一切。我想将图像作为独立附件上传,我想使用 javascript、REST 和
我编写了一段代码,以便能够启动默认的电子邮件服务提供商,即我的 Outlook。这是我的代码: if(role.getValue().equals("1")) { Desktop desktop =
我正在尝试使用链接上共享的代码使用 python 从 Gmail 下载电子邮件附件 https://gist.github.com/baali/2633554 我想应用时间过滤器+主题过滤器并下载附件
我是一名优秀的程序员,十分优秀!