背景画像を適切に配置する際に問題があります。デスクトップ上で動作し、電話機をシミュレートするためにウィンドウのサイズを変更しても正しく表示されますが、実際に携帯電話(Android/ChromeおよびiOS/Safariでテスト済み)でウェブサイトを実際に訪問すると、プロパティ。問題のCSSバックグラウンド位置がモバイルで動作しない
CSS:
.blur {
background:
/* top, transparent blue, faked with gradient */
linear-gradient(
rgba(43, 43, 43, 0.1),
rgba(43, 43, 43, 0.1)
),
/* bottom, image */
/* BACKGROUND IMAGE */
url('https://suzannecowan.ca/wp-content/uploads/2016/04/2015-10-20-macleans-2-1.jpg');
background-attachment: fixed;
background-position: -350px -150px;
background-position-x: -350px;
background-position-y: -150px;
background-size: cover;
background-repeat: no-repeat;
background-color: #2b2b2b;
overflow: auto;
}
@media (min-width: 40em) {
.blur {
background:
/* top, transparent blue, faked with gradient */
linear-gradient(
rgba(43, 43, 43, 0.1),
rgba(43, 43, 43, 0.1)
),
/* bottom, image */
/* BACKGROUND IMAGE */
url('https://suzannecowan.ca/wp-content/uploads/2016/04/2015-10-20-macleans-2-1.jpg');
background-attachment: fixed;
background-position: -350px 0;
background-size: cover;
background-repeat: none;
}
@media (min-width: 50em) {
.blur {
background:
/* top, transparent blue, faked with gradient */
linear-gradient(to right,
rgba(43, 43, 43, 0.1),
rgba(43, 43, 43, 0.1)
),
/* bottom, image */
/* BACKGROUND IMAGE */
url('https://suzannecowan.ca/wp-content/uploads/2016/04/2015-10-20-macleans-2-1.jpg');
background-attachment: fixed;
background-position: -250px 0;
background-size: cover;
background-repeat: none;
}
私は解決策を検索して過去の人々を助けた2つの提案を見つけた:助けにはならなかったbackground-position-x
とbackground-position-y
を追加する、とのうち、背景画像を動かしますbody
と、これもまた助けにならなかった別の容器(この場合は.blur
)に入れてください。
ウェブサイトは:https://suzannecowan.ca/です。
アドバイスをいただきありがとうございます。
'@media(min-width:)'のピクセル量を使ってみましたか?私はその目的のために使われた「em」を見たことがありません。 – theblindprophet
@theblindprophet私はいつもそれのために 'em'を使っていましたが、以前は問題がなかったのですが、あなたが示唆したように変更しました。 –
特にイライラしているのは、私がshaun-francis.comで同じテクニックを使用していて、完璧に機能していたので、私は今何が間違っているのか分かりません。 –