Arka plan resmini düzgün bir şekilde konumlandırırken sorun yaşıyorum. Masaüstünde çalışır ve bir telefonu simüle etmek için pencereyi yeniden boyutlandırdığımda bile doğru görüntüleniyor, ancak aslında telefonumdaki web sitesini ziyaret ettiğimde (Android/Chrome ve iOS/Safari'de test edildi) arka plan konumunu göz ardı ediyor gibi görünüyor. özelliği. Söz konusuCSS Arka plan konumu mobil cihazda çalışmıyor
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;
}
Ben insanlara yardımcı oldu iki öneri yanıt aradık ve bulduk geçmiş: yardımcı olmadı background-position-x ve background-position-y eklenmesi ve dışarı arka plan görüntüsünü hareketli body ve farklı bir kap içine (bu durumda .blur) da yardımcı olmadı.
Web sitesi: https://suzannecowan.ca/.
Sağladığınız öneriler için şimdiden teşekkür ederiz. Android/Chrome'da, arka plan IS konumlandırılmıştır.
'@media (min-width:)' için bir piksel miktarı kullanmayı denediniz mi? Bu amaçla kullanıldığını hiç görmedim. – theblindprophet
@theblindprophet Ben her zaman için em 'kullanmıştım ve daha önce hiç problem yaşamadım, ama önerdiğin gibi değiştirdim ve hiç farketmedi. –
Özellikle sinir bozucu olan shaun-francis.com aynı tekniği kullandım ve mükemmel çalıştı, bu yüzden şimdi yanlış ne yapıyorum bilmiyorum. –