問題タブ [background-attachment]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - body要素で、ページの上部に画像を添付します。imgのスクロールはありません
次の問題があります。手っ取り早い方法はあると思いますが、今のところ解決方法がわかりません。
だから、私は画像を持っていて、要素のページの上部にのみ背景画像として表示したいのです。<body>現在、下にスクロールするとページの一番下に移動しています。
私は次のコードを持っています:
css - background-attachment: Safari で動作しない問題を修正
ブラウザーの 100% にまたがる要素で次のコードを実行しています。
私がする必要があるのは、画像をブラウザの幅全体に広げ、固定したままにすることです (これにより、コンテンツがその上にスクロールできるようになります)。
Safari を除くすべてのブラウザで動作するようです。
要素の高さと最小高さを100%に設定しようとしましたが、喜びはありませんでした。
デモ ページへのリンクは次のとおりです。 http://oscarsarc.tinygiantstudios.co.za/adopt/adopt-nationwide/
css - background-attachment の設定: 固定され、引き続き background-position を使用
画像の左下に背景カバー画像を配置しようとしています（background-position: 0% 100%;）と同時に、画像がスクロールしないように位置を修正します。
問題は、使用background-position時に無視されていることbackground-attachment:fixedです。
いくつかのサンプル HTML:
そして関連する CSS:
スクロールするように削除background-attachmentまたは変更すると、画像が正しく配置されます。画像を固定位置に保持するには何が必要ですが、その位置は画像の左下になりますか?
タグを介して画像を追加しようとしました<img>が、それも機能しません。
コードで遊んでみたい場合は、こちらの JS Fiddle に追加しました: http://jsfiddle.net/bradonomics/xtjmyv7y/2/
プロパティである CSS の 5 行目を取り出すbackground-attachmentと、床にラグが敷かれているのがわかります。
html - HTML/CSS Chrome の再描画なしの複数の固定背景
このようなレイアウトの場合: http://codepen.io/anon/pen/dPwQod
HTML:
CSS:
Chrome はスクロール時にビューポート全体を再描画するため、特に Retina ディスプレイではスクロールが非常に遅くなります。インスペクターで「ペイント長方形を表示」にチェックを入れると、実際に表示できます。
背景を個々のレイヤーに強制する方法を探しましたが、このレイアウトに合ったものは見つかりませんでした. translateZ(0) を提案し、背景を独自の固定 div に配置することを提案する人もいますが、これは固定背景が 1 つある場合にのみ機能します。このレイアウトのような複数の背景を持つスクロールでクロム全体を再描画しないようにする方法はありますか? または、少なくとも Chrome の遅延なしでこのレイアウトを可能にする方法はありますか?
乾杯。
html - これらの背景画像はどのようにこのように固定されたままですか?
この質問を何と呼ぶべきかよくわからなかったので、そのタイトルが正しいことを願っています。
私は新しいクライアントのためにこのウェブサイトに取り組んでいますが、彼らはこのウェブサイトが行っていることと似たようなものが欲しいと言っていました ( http://www.buzzardfilm.com )。
下にスクロールすると、この種の「滑らかなアニメーション」があり、新しいブロックが背景画像にスライドし始めると、インデックスページに表示されますか?
これは私が話していることです: http://gyazo.com/8cafbab233930bd478723b48c5912263
私の質問は、これは通常どのように達成されるのですか? これはテキストが上にある単なる画像ですか、それとも背景画像ですか? これを取得するには、どのようなルールを設定する必要がありますか?
css - background-attachment のフォールバック: 修正済み
実稼働サイトでは、 にbackground-attachment: fixed画像を適用してbodyいます。このスタイル ルールをサポートしていないブラウザーにはグラデーション フォールバックを使用し、同じブラウザーがグラデーションをサポートしていない場合は無地の背景フォールバックを使用しています。問題は、確実に機能しないことです。
と を使用してbackground-attachment: fixedサポートを検出しようとしましたが、一貫性がなく、iOS および Android デバイスでかなりの数の誤検知が発生します。私は他の SO の投稿を読んだことがありますが、それらはすべて大きなマイナス面を持つ回避策を示唆しているように見えますが、同時に、ここにはトレードオフがあることにも気付きました。document.body.style@supports
また、なりすましの可能性があるため、ユーザー エージェントを検出してはならないという記事もよく読んでいます。ユーザー エージェントを検出し、グラデーション フォールバックをモバイル ブラウザーにのみ適用した場合、誰かがエージェントをモバイル ブラウザーとしてスプーフィングすることに実際にマイナス面はありますか? その場合、代わりにグラデーションの背景が表示されます。モバイル ブラウザーのユーザー エージェントをデスクトップ ブラウザー エージェントとして偽装しようとする人を心配する必要がありますか? 本当にやりたいとは言えません。なぜなら、それは私を部分的に殺してしまうからです。
昨夜、上記のことを考えたばかりですが、実際には、ユーザーエクスペリエンスを大幅に低下させない、プロダクションレベルのサイトにある種の同様のフォールバックを適用した人を探しています.
html - background-attachment を使用しない背景画像のスケーリング: 修正済み?
背景画像を完全にレスポンシブにするための最良の方法を見つけようとしています-これまでのところ、私が理解できる最善の方法は、ほとんどの人が提案する傾向があるように、background-size: cover を使用することですが、 background-attachment: fixedを使用します。画面のサイズが変更されると、画像の縦横比が縮小されます。それ以外の場合は、元の縦横比が保持され、まったく拡大縮小されません。background-size のみを使用: cover はイメージを引き伸ばしてコンテナー div を埋めますが、比率は自動的にスケーリングしません。
ただし、下にスクロールするときに画像の一部を非表示にする固定背景の効果は望んでおらず、それを background-attachment: scroll にすることを好みますが、それを機能させて拡大縮小することはできません。
だから私の質問は: background-attachment: fixed を使用せずに背景画像を画面サイズに合わせて自動的に拡大縮小する方法はありますか?
現時点で私が持っているものについては、私の JSFiddle を参照してください: https://jsfiddle.net/uhoL5d5w/2/
（そして、はい、さまざまな画面サイズに最適化された画像を提供するために、ある時点でメディアクエリを使用する必要があることも認識しています）
私の現在のコードは次のようになります。
html - CSS background-attachment とサイズ
コンテナ内のページで画像をスクロールさせようとしていますが、固定にはしていません（そのようにするには、スクロールで上下に移動する必要があります:)）。画像を背景として設定し、背景の添付ファイルを固定に設定するとうまくいくはずです。このようなもの：
まず第一に、Google が私に約束した効果は得られません。助言がありますか？第二に、背景画像をコンテナに合わせてこの効果を達成することに関して、これがベストプラクティスであるかどうかを誰かに教えてもらえますか?
[編集]: できる限り具体的に言うと、問題は何も起こらないことです。background-attachment ルールを追加したことがないようです。