将 css3 旋转到 Chrome 中的 DIV 然后背景附件：修复创建错误

Question

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

查看http://jsfiddle.net/P3jS4/

现在我正在开发 chrome18。

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

http://jsfiddle.net/P3jS4/2

Answer 1

这不是错误。

您正在尝试做一些the spec 尚未定义的事情。它在 cmets 中说：

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

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

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

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

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

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

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

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

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

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

Answer 2

我有一个工作解决方案，可以同时使用固定和变换旋转。

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

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

这是fiddle！

这个updated fiddle 显示旋转方向相反。

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

这是NEW Fiddle，其中包含许多解释 CSS 的 cmets。

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

Answer 3

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

---

我有一个jsFiddle work-in-progress 想与你分享并尽早发布。

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

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

注意在未完成的演示中，图像可以在 div 中设置不同（它设置为固定和重复），例如使用 CSS3 contain 或 cover 为它的内容提供不同的视差效果显示。

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

jsFiddle 截图（已缩小）：
下图中特意显示了蒙版，它应该与背景颜色相匹配。对于某些浏览器，您可以使用 CSS3 border-image 属性而不是彩色蒙版（因为黄色蒙版实际上是边框！）。

---

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

---

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

---

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

Answer 4

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

Answer 5

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

.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;
}​