問題タブ [background-attachment]

これは私のCSSです

background-position写真の位置は、存在しなかったかのように (0% 0%) のままです。なぜこれが起こるのか誰にも分かりますか？

また、クロムを使用してページを検査し、CSS を編集すると、background-position. のチェックを外して、background-position再びオンにするとします。効果が適用されます。なぜそれが起こるのかわかりませんが、オーバーライドされているのでしょうか？

同じページのさまざまな要素に背景を追加するのに問題があり、助けが必要です。「background-attachment」を使用して、複数のセクションと背景 ( http://ofarevolution.com/など) を持つ 1 ページのサイトを作成しようとしていますが、複数の背景を表示することはできません。私は気が狂ってしまいます、助けてください。

これが私のセットアップです：http://codepen.io/marks828/pen/YWLKmw

Web サイトにパララックス スクロールを実装していますが、モバイル デバイスでは機能しません。モバイル デバイスに実装する方法がわかりません。これは、モバイル ディスプレイがタッチ スクリーンであるため、PC のようにマウスでスクロールできるところを指でスクロールする必要があるためだと思います。前もって感謝します。

私は全幅の視差タイプのページに取り組んでおり、セクションが歪んでいます。問題は、Firefox で transform:skew() が background-attachment:fixed プロパティを台無しにしているように見えることです。Chrome、Safari、IE11 では動作しますが、Firefox では動作しません。

この問題の回避策や修正を知っている人はいますか?

私のコードの例

background-attachment に問題があります: 修正済み。ページの要素に適用すると、非常に途切れ途切れのスクロール効果が生じます。基本的に、ユーザーにとって良い経験ではないものではありません。

私のコードはここにあります：

HTML

CSS

ここに、私が話していることを正確に示すコードペンへのリンクがあります: http://codepen.io/reskk/pen/qaYJwq

編集: フルページ Codepen: http://codepen.io/reskk/full/qaYJwq/

不思議なことに、ブラウザーのサイズを小さな幅 (たとえば 800px) に縮小すると、実際にはスクロールが非常にスムーズになります。

ブラウザーが最大幅 (および最大高さ、コード入力ボックスのために codepen を完全に取得できない) にあるとき、ぎくしゃくした途切れ途切れのスクロールが発生します。

私はこれについて広範な検索を行いましたが、解決策を見つけることができませんでした。

誰かがこれについて何か考えを持っていますか? これは非常に素晴らしい効果ですが、残念なことに、それがもたらすパフォーマンスによって役に立たなくなります。

ありがとう、

レスク

したがって、私が抱えている実際の問題は、背景画像をコンテナを埋めるのに十分な幅に保ちながら、背景画像効果を固定したいということです。残念ながら、CSS の方法ではbackground-attachment:fixed;、ビューポートを基準にして画像を配置するだけです。これにより、背景画像とは縦横比が大幅に異なる画面サイズで問題が発生し、背景画像 (人物の写真) の不要なクリッピングが発生します。

私が現在たどり着いた解決策は、スクロール時にアニメーション化することでJavaScriptbackground-size: containをシミュレートしながら、すべての画面サイズで画像のクリッピングを防ぐために使用しています。問題は、ページの下にアニメーションを表示するボタンをクリックすると、画像の設定がぎくしゃくすることです。background-attachment: fixedbackground-position-yscrollTopbackground-position-y

アニメーションでこのぎこちなさを防ぐ方法はありますか?

答え：background-attachment

----- JSBin の例----

答えは、使用することですbackground-attachment

元の質問

背景に「透けて見える」モーダルを表示したいプロジェクトに取り組んでいますが、モーダルパネルの外側はすべてわずかにマスクされています。

で正常に使用できborder: 10000px rgba(0,0,0,0.3)ましborder-radius: 10010pxたが、これはハックであり、モーダルを a で概説することはできませんbox-shadow

これを行うための標準的な方法はありますか？透明度フィルターのグラデーションを画像に適用する方法を考えることができれば、ボーナス ポイントです。

spn Web アプリの背景画像を設定しようとしていますが、背景を修正する必要があります (ページの残りの部分と一緒にスクロールされません)。

これは本体のCSSです：

IOS の Safari と Android の Chrome は、1 点で固定するのではなく、背景を繰り返します。

インターネットでモバイルで無効になっているのを見たことがありますが、解決策はありますか?