問題タブ [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 - CSS3 変換後に壊れた「background-attachment: fixed」を「修正」するハックを知っている人はいますか?
background-attachment: fixedそれに適用されたノードがあります。固定された背景は、適用されたノードに続くと「壊れます」。-webkit-transform誰かがそれを知っている場合、それを修正するためのハックを探しています(たとえば、次のような奇妙なことで修正できるWebkit css3バグが複数あります)適用-webkit-perspectiveなど）。
これは、ノードを移動するほど単純ではないことに注意してください。私のライブコードでは、ノードの順序に関係なく壊れます（ただし、jsfiddleにはありません）
そして、私はすでにそのバグを報告しましたが、同様の ( のposition: fixed) バグが 1 年以上開かれています
例 ( http://jsfiddle.net/m3scX/2/ ):
CSS:
html - background-attachment の代替: 修正済み
background-attachment:fixed は一部のモバイル ブラウザー (iOS など) では機能しないため、特に次のデモを実装しようとする場合、どのような代替手段がありますか: http://cppforums.ludost.net/test/test.html
CSS:
HTML:
すべてのブラウザーで動作するようにデモを実装する方法について何か提案はありますか? できればCSSのみのソリューションです。
css - IE で "background-attachment:fixed" を使用すると、ズーム時に背景のサイズが大きくなります
すべてのコンテナを全画面サイズにし、背景を繰り返したりスクロールしたりせずに完全に埋めたいと思っています。もちろん、「background-size: cover;」を使用します。および「background-attachment:fixed;」これは Firefox と Chrome で問題なく動作します。IE 8 の場合、JavaScript プラグインを使用します。
IE 11 でページを開いたとき、ズームしない限り問題なく動作しているように見えました。IE でズームアウトすると、背景も小さくなります。これは、「background-attachment:fixed」がないと発生しません。この組み合わせでのみ、私が本当に望んでいない背景がズームされます。
私は何を間違っていますか？どうもありがとう。
ここに私の完全なコード：
css - 背景修正＆カバー - Internet Explorer 11
http://apolytos.com/new/img/test.html
Internet Explorer 11 はカバーしていません。提供されたリンクを表示します。:fixed を削除すると、想定どおりにカバーされますが、ページ上のコンテンツで bg がスクロールされますが、これは望ましくありません。IE では、これらの 2 行のコードと競合しているようです。
css - CSS background-size: cover + background-attachment: 背景画像のクリッピングを修正
背景画像を含む図のリストがあります。次のようなもの：
これらの各イメージには、と にbackground-size設定されています。coverbackground-attachmentfixed
各図がビューポート全体を占める場合、これはうまく機能しますが、何らかのオフセットがある場合、背景画像が切り取られます。
私が知る限り、これは設計によるものです ( https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Values )。
画像を垂直または水平のいずれかで切り取って、両方ではなく、図自体のサイズで中央に配置したいと思います。
JavaScript ソリューションがあることは知っていますが、CSS を使用してこれを行う方法はありますか?
これが実際の例です: http://codepen.io/Godwin/pen/KepiJ
css - Chrome で背景が機能しない問題を修正
私はbackground-attachment: fixed;自分のヒーローセクションを持っていますが、Firefox と Safari では動作しますが、Chrome では動作しません。position:relative;andに変更することで機能させることができz-index: -1;ますが、ヒーロー内のボタンが使用できなくなり、Firefox と Safari でも問題が発生します。
私が見つけた他の投稿に基づいて、親の位置を静的に変更しようとしましたが、それもうまくいきませんでした。
css - background-attachment は、css3 変換アニメーションでは実際には修正されていません
「左」属性アニメーションを変更する代わりに、css3 変換アニメーションで固定背景アタッチメントを使用するにはどうすればよいですか?
ここで固定の背景アタッチメントを使用したい