問題描述

我的 background-attachment:fixed 工作正常.但是，當我在該 DIV 上定義 CSS3 rotate 并向下滾動時，background-attachment:fixed 停止工作.

My background-attachment:fixed is working fine. But when I define CSS3 rotate on that DIV and scroll down then background-attachment:fixed stops working.

檢查這個 http://jsfiddle.net/P3jS4/

現在我正在開發 chrome18.

當您刪除旋轉 css 時，背景附件:固定工作正常.

When you remove the rotate css then the background-attachment:fixed works fine.

http://jsfiddle.net/P3jS4/2

推薦答案

這不是錯誤.

您正在嘗試做一些尚未定義的規范.它在評論中說:

You're trying to do something the spec hasn't defined yet. It says in the comments:

固定背景在變換中有何作用?他們可能應該完全忽略變換，因為 - 甚至變換 - 對象應該充當固定背景可以通過的舷窗"以原始形式查看.

What do fixed backgrounds do in transforms? They should probably ignore the transform completely, since - even transformed - the object should be acting as "porthole" through which the fixed background can be viewed in its original form.

問題在于固定"是指相對于視口(瀏覽器窗口)，而不是父元素.視口不旋轉，只有一個視口.

The issue is that "fixed" means relative to the viewport (browser window), not the parent element. The viewport doesn't rotate and there is only one viewport.

鑒于規范尚未確定正確的方法是什么，那么我們不知道您所說的不工作"是什么意思.如果它在其他瀏覽器中有效"，那是因為他們在沒有等待規范更新的情況下做出了判斷.您應該更新您的問題以反映您想要的行為，而不是它是否有效".

Given the specification hasn't decided what the correct approach is then we don't know what you mean by "not work". If it "works" in other browsers that's because they have made a judgement without waiting for the spec to be updated. You should update your question to reflect the behaviour you want, not whether it "works" or not.

由于您在規范之外工作，因此在此階段沒有必要期待瀏覽器修復.我的建議是修改您的代碼，以便您通過以下方法之一遵循規范:

There is no point at this stage to expect a browser fix since you are working outside of the specification. My suggestion is to revise your code so you are following the specification through one of the following methods:

• 使用 img 而不是背景
• 使用畫布或 SVG
• 在繪畫程序中旋轉背景
• 將背景放在旋轉元素后面的元素上

如果這些都不能使用，并且沒有其他解決方法可用，那么您的答案是無法完成.

If none of these can be used, and no other workarounds are available then your answer is that it can't be done.

更新:我剛剛意識到我鏈接的規范已被 更新版本 將預期行為闡明為:

UPDATE: I just realised the spec I linked has been superceeded by a newer version which clarifies the expected behaviour as:

固定背景會受到為根元素指定的任何變換的影響，而不受任何其他變換的影響.

Fixed backgrounds are affected by any transform specified for the root element, and not by any other transforms.

因此，具有固定背景的元素仍然像舷窗"成固定在視口上的圖像，并在元素影響舷窗，而不是其背后的背景.在另一方面，變換根元素仍然會變換頁面上的所有內容，而不是除固定之外的所有內容背景.

Thus an element with a fixed background still acts like a "porthole" into an image that's fixed to the viewport, and transforms on the element affect the porthole, not the background behind it. On the other hand, transforming the root element will still transform everything on the page, rather than everything except for fixed backgrounds.

假設不工作"是指背景不旋轉，那么你正在做的事情將無法在符合標準的瀏覽器中工作.

Assuming that by "not working" you mean the background doesn't rotate then what you are doing won't work in a conforming browser.

這篇關于將 css3 旋轉到 Chrome 中的 DIV 然后背景附件:修復創建錯誤的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！