0
誰かがこのページを見て、これを修正する方法を知っているかどうかを確認できますか。CSSの背景ヘッダーモバイルブラウザではうまい
このページでは、デスクトップのChromeとFirefoxブラウザ上で動作します。モバイル480pxに対応した開発者プレビューでも動作します。
モバイルやタブレットでこのページを表示すると、ヘッダーの背景やぼかしがうごめいます。位置合わせから外れ、デスクトップ上のように画像上をスクロールしません。
私の推測では、一部のCSSはモバイルChromeでサポートされていません。これは本当ですか?
解決してください。ここで おかげ
はありませんプロJS Fiddle
.title_EService {
background: url(http://advantageaccountants.com.au/image/e_service_header.jpg) fixed center 3.67em no-repeat;
width: 100%;
height: 200px;
position: relative;
overflow: hidden;
}
.title_EService > header {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
padding: 20px 30px;
background: inherit;
background-attachment: fixed;
overflow: hidden;
}
.title_EService > header::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.title_EService > header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25)
}
.title_EService > header > h1 {
font-weight: bold;
margin: 0;
color: white;
position: relative;
z-index: 1;
}