23

我background-attachment:fixed的工作正常。但是当我在那个 DIV 上定义CSS3 旋转并向下滚动然后background-attachment:fixed停止工作。

检查这个http://jsfiddle.net/P3jS4/

现在我正在研究chrome18。

当您删除旋转 css 时，背景附件：固定工作正常。

http://jsfiddle.net/P3jS4/2

4

5 回答 5

8

这不是错误。

您正在尝试做一些规范尚未定义的事情。它在评论中说：

固定背景在变换中有什么作用？他们可能应该完全忽略变换，因为 - 甚至变换 - 对象应该充当“舷窗”，通过它可以以原始形式查看固定背景。

问题是“固定”意味着相对于视口（浏览器窗口），而不是父元素。视口不旋转，只有一个视口。

鉴于规范尚未确定正确的方法是什么，那么我们不知道您所说的“不工作”是什么意思。如果它在其他浏览器中“有效”，那是因为他们在没有等待规范更新的情况下做出了判断。您应该更新您的问题以反映您想要的行为，而不是它是否“有效”。

由于您在规范之外工作，因此在此阶段没有必要期待浏览器修复。我的建议是修改您的代码，以便您通过以下方法之一遵循规范：

  • 使用img而不是背景
  • 使用画布或 SVG
  • 在绘画程序中旋转背景
  • 将背景放在旋转元素后面的元素上

如果这些都不能使用，并且没有其他解决方法可用，那么您的答案是无法完成。

更新：我刚刚意识到我链接的规范已被新版本所取代，该版本将预期行为澄清为：

固定背景受为根元素指定的任何变换影响，不受任何其他变换的影响。

因此，具有固定背景的元素仍然像“舷窗”一样进入固定到视口的图像，并且元素上的变换会影响舷窗，而不是其后面的背景。另一方面，转换根元素仍然会转换页面上的所有内容，而不是除了固定背景之外的所有内容。

假设“不工作”是指背景不旋转，那么你正在做的事情将无法在符合标准的浏览器中工作。

于 2012-05-16T04:37:21.907 回答
3

我有一个工作解决方案，可以同时使用fixed和 transform rotate。

此信息考虑到它们不能一起工作，但让我们让它们分开工作。

一旦图像下方有一些真实内容，则将阻止该图像的右下角接触浏览器视口的右下角，这是使用该fixed值的最后一个有效位置。因为在那之后就是虚空之地。

这是小提琴！

这个更新的小提琴显示旋转方向相反。


根据我们对您的确切要求的讨论，我现在有了您想要的东西。这种方法是完全重写的，它使用与旋转相结合的蒙版效果来允许内部图像保持不旋转......但这也可以有它自己的旋转！

这是新的 Fiddle，有很多解释 CSS 的注释。

状态更新：我的答案都不正确，因为我没有意识到 OP 的完整要求。目前，使用固定图像进行旋转是一种非标准方法，之前通过链接信息在上面讨论过。也许 jQuery Parallax 方法适合这种独特且具有挑战性的要求。

于 2012-05-17T06:20:06.430 回答
2

最新动态的新答案：2012 年 7 月 4 日

我有一个jsFiddle 正在进行中的工作，我想与您分享并提前发布。

它应该为您提供有关如何完成这种特定样式的想法。

特别是，它具有视差效果。

请注意，在未完成的 Demo 中，可以在 div 中以不同方式设置图像（设置为固定和重复），使用 CSS3contain或cover例如为其显示的内容设置不同的视差效果。

它不限于图像，可以使用任何静态内容代替，因为该对象从不旋转/反向旋转，不会导致浏览器 CPU 命中。

jsFiddle 截图（它被缩小了）：
掩码是故意显示在下面的图像中，它应该与背景颜色匹配。对于某些浏览器，您可以使用 CSS3border-image属性而不是彩色蒙版（因为黄色蒙版实际上是边框！）。 在此处输入图像描述

示例 1：
这是一个jsFiddle，其中调整了遮罩、不透明度和额外的填充（有点像预期的那样。）。

在此处输入图像描述

示例 2：
这是一个如上所示的jsFiddle，其内容以CSS3 cover方法显示整个网页的打孔效果。

在此处输入图像描述

我需要尽快回到这个项目。同时，请随意使用这个早期的作品。干杯!

于 2012-07-05T01:29:19.293 回答
0

我认为您需要做的是删除background: ...固定的 0 0;属性以使图像正确旋转，同时在滚动时不会丢失它。小提琴就是这个；否则你可以制作一个矩形图像，里面有一个透明的旋转矩形。这将是您尝试完成的 css 的图像破解。

于 2012-05-29T23:30:59.413 回答
-2

将背景属性更改为内容属性

.pic{
    background:url(http://cssglobe.com/lab/angled/img.jpg) fixed 0 0;
    height:300px;
    -webkit-transform: rotate(-10deg);
    border:1px solid green;
}

至

.pic{
    content:url(http://cssglobe.com/lab/angled/img.jpg) fixed 0 0;
    height:300px;
    -webkit-transform: rotate(-10deg);
    border:1px solid green;
}​
于 2012-05-17T07:37:42.943 回答