23

私background-attachment:fixedはうまくいっています。しかし、CSS3をその DIV で回転させて下にスクロールすると、background-attachment:fixed動作が停止します。

これをチェックしてくださいhttp://jsfiddle.net/P3jS4/

現在、私はchrome18に取り組んでいます。

回転 css を削除すると、background-attachment:fixed が正常に機能します。

http://jsfiddle.net/P3jS4/2

4

5 に答える 5

8

これはバグではありません。

仕様でまだ定義されていないことをしようとしています。コメントには次のように書かれています。

固定背景は変換で何をしますか? オブジェクトは、固定された背景を元の形で見ることができる「舷窓」として機能する必要があるため、変換を完全に無視する必要があります。

問題は、「固定」とは、親要素ではなく、ビューポート (ブラウザー ウィンドウ) に対して相対的であることです。ビューポートは回転せず、ビューポートは 1 つだけです。

仕様が正しいアプローチを決定していないことを考えると、「機能しない」とはどういう意味かわかりません。他のブラウザで「動く」のは、仕様の更新を待たずに判断したからです。「機能する」かどうかではなく、必要な動作を反映するように質問を更新する必要があります。

仕様外で作業しているため、この段階でブラウザの修正を期待しても意味がありません。私の提案は、次のいずれかの方法で仕様に従っているように、コードを修正することです。

  • img背景ではなくを使用する
  • キャンバスまたは SVG の使用
  • ペイント プログラムでの背景の回転
  • 回転した要素の背後にある要素に背景を配置する

これらのいずれも使用できず、他の回避策がない場合は、それを実行できないというのがあなたの答えです。

更新:リンクした仕様が、次のように期待される動作を明確にする新しいバージョンに取って代わられたことに気付きました:

固定背景は、ルート要素に指定された変換の影響を受けますが、他の変換の影響を受けません。

したがって、固定された背景を持つ要素は、ビューポートに固定された画像への「舷窓」のように機能し、要素の変換は背後の背景ではなく、舷窓に影響を与えます。一方、ルート要素を変換しても、固定された背景以外のすべてではなく、ページ上のすべてが変換されます。

「機能しない」とは、背景が回転しないことを意味すると仮定すると、準拠しているブラウザーでは何をしていても機能しません。

于 2012-05-16T04:37:21.907 に答える
3

私は、変換回転と一緒に固定された両方を使用できる実用的なソリューションを持っています。

この情報は、それらが一緒に機能できないことを考慮に入れていますが、それらを別々に機能させるようにしましょう。

画像の下に実際のコンテンツがあると、その画像の右下隅がブラウザのビューポートの右下隅に接触するのを防ぎます。これは、fixed値を使用するための最後の有効な場所です。その後、それは空虚な土地だからです。

これがフィドルです！

この更新されたフィドルは、回転が反対方向に進むことを示しています。


あなたの正確な要件に関する私たちの議論によると、私は今あなたが探しているものを持っています。この方法は完全な書き直しであり、回転と組み合わせたマスク効果を使用して、内部画像を回転させないままにすることができます...しかし、それも独自の回転を​​持つことができます！

これがCSSを説明するコメントがたくさんある新しいフィドルです。

ステータスの更新： OPの完全な要件を認識していなかったため、私の答えはどれも正しくありません。現在、固定画像での回転の使用は、リンク情報を介して前述した非標準の方法です。おそらく、jQuery Parallaxメソッドは、このユニークでやりがいのある要件に適しています。

于 2012-05-17T06:20:06.430 に答える
2

最近の開発に対する新しい回答：2012年7月4日

jsFiddleの進行中の作業があります。これを皆さんと共有し、早期にリリースしたいと思います。

それはあなたにこの特定のスタイルを達成する方法についてのアイデアを与えるはずです。

特に視差効果があります。

未完成のデモでは、画像をdivで別の方法で設定できることに注意してください（固定して繰り返し設定します）。CSS3を使用するcontainかcover、たとえば、表示するコンテンツの視差効果を変えます。

これは画像に限定されず、代わりに静的コンテンツを使用できます。これは、このオブジェクトが回転/逆回転することはなく、ブラウザのCPUヒットを引き起こさないためです。

jsFiddleスクリーンショット（ズームアウトしてキャプチャされました）：
マスクは下の画像に意図的に表示されています。背景色と一致している必要があります。一部のブラウザでは、色付きのマスクの代わりにCSS3プロパティを使用できますborder-image（黄色のマスクは実際には境界線であるためです）。 ここに画像の説明を入力してください

例1：
これは、マスク、不透明度、および追加のパディングが調整されたjsFiddleです（意図したとおりに表示されるように）。

ここに画像の説明を入力してください

例2：
これは上記のjsFiddleCSS3 coverで、ウェブページ全体のパンチアウト効果を説明するためのメソッドでコンテンツが示されています。

ここに画像の説明を入力してください

すぐにこのプロジェクトに戻る必要があります。それまでの間、この初期の作品をお好きなようにご利用ください。乾杯！

于 2012-07-05T01:29:19.293 に答える
0

あなたがする必要があるのは、background: ...固定された 0 0;プロパティを削除して、スクロールしても画像が失われないように画像を適切に回転させることだと思います。そのためのフィドルはこれです; それ以外の場合は、透明な内部に回転した長方形を含む長方形の画像を作成できます。これは、達成しようとしている css のイメージ ハックです。

于 2012-05-29T23:30:59.413 に答える
-2

background プロパティを content プロパティに変更

.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 に答える