2017-10-10 15 views
0

私は個人用サイトを構築しています。しかし、私は大きな問題を抱えています。バックグラウンド・アタッチメント:モバイル機器では固定されていません。私はbg固定、+ javascriptの効果で、4つのセクションがあります。background-attachment:モバイルデバイスで固定機能が動作していません

最後のセクションは非常に重要です... 誰かが私にこれらの問題を解決してください助けることができますか?私は本当に感謝します。 サイトはここにある:my site私の悪い英語のため申し訳ありません

.hello 
background-image: url("../img/hello.jpg") 
background-repeat: no-repeat 
background-size: cover 
background-position: center 
background-attachment: fixed 
height: 100vh 
min-height: 600px 
display: flex 
flex-direction: column 
justify-content: center 
align-item: center 
text-align: center 

//、

+0

ようこそStackOverflow!私たちがあなたのお手伝いをするために、あなたの質問を更新して**関連するコードを** [最小限の、完全で検証可能な例で]表示できるようにしてください(http://stackoverflow.com/help/mcve)** 。あなたの問題を解決するためにあなたが** [これまでに試したことがある](http://meta.stackoverflow.com/questions/261592)**を知らせることができれば助けになるでしょう。詳細については、** [良い質問をする方法](http://stackoverflow.com/help/how-to-ask)**に関するヘルプ記事を参照し、** [サイトのツアー](http://stackoverflow.com/tour)** –

答えて

0

それは残念ながら...ブラウザが完全に再レンダリング画像にあなたがスクロールするたびに持っており、モバイルでサポートされていないのです過去にそれはあまりにも多くのパフォーマンスヒットでしたが、それはサポートのように見えますが、https://css-tricks.com/almanac/properties/b/background-attachment/が芽吹き始めています。 ...のように、固定

.background{ 
position: fixed; 
background-image: url(image source); 
top: 0; 
left: 0; 
width: 100%; 
height: 100%: 
z-index: 0; 
} 

、それ以上のスクロール位置のいずれかが必要ですすべてのもの:相対または位置を現時点で同等の効果を得るための唯一の方法は、位置と独立した要素として、あなたの背景を持っていることです。絶対値が0より大きいZインデックスを持つ。

関連する問題