在移动的背景图象被舒展或不显示

时间:2018-03-04 17:49:09

标签: css image mobile background-image

嗨,人们,
我真的不知道该怎么做了。我已经阅读了这些主题,并尝试了几乎所有我认为它可以工作的东西,但没有!

所以在这里:我的背景图像显示和调整正常与桌面浏览器但在我的手机上(在这种情况下iPhone 6S)它被拉伸(看起来有点模糊)或根本没有显示。

链接到我的页面(http://lauramaliqi.com/about.html)

我的代码(我添加了H1和p - 以防万一它们影响了上层代码。此代码也用于所有其他页面,也提供与此相同的结果。)

.top-bar-about { 
 color: #333;
 height: 350px;
 padding: 100px 0 10px;
 background: -webkit-linear-gradient( rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)), url(../img/laura_background1.jpg);
background: linear-gradient( rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)), url(../img/laura_background.jpg);
background-size: cover;
background-attachment: fixed;
background-position: center center;
text-align: center;}

.top-bar-about h1 { 
    font-size: 35px;
    font-weight: 400;
    color: #999;
    line-height: 50px;
    display: inline-block;
    text-align: center;}

.top-bar-about p { 
    font-size: 22px;
    font-weight: 300;
    color: #999;
    line-height: 10px;
    font-family:'Walter Turncoat', sans-serif;} 

我尝试过更改背景附件:固定为滚动;改变了背景图片的大小,因为我在其中一篇文章中读到了可能也是问题。使用@media查询 - 没有结果。放下不重复然后它与我的桌面图像混淆......基本上我尝试过它只是不工作。

只是添加我知道有时缓存可能是浏览器中的一个错误,但我在上传新文件但在手机上时一直删除缓存..该死的图片只是没有反应。就像冻结一样。

提前谢谢!!

P.S。我也做了一些截图以防万一

应该如何

How it should be

目前的情况

How it is at the moment

1 个答案:

答案 0 :(得分:0)

刚刚检查了我的iOS 10设备并发现这是因为

 background-attachment: fixed;

再试一次,然后更改' fixed'滚动'滚动适用于移动设备:

@media (max-width: 991px) {

 .top-bar-about{
    background-attachment: scroll;
    padding: 254px 0px !important;
 }

}

确保样式没有缓存,不要互相覆盖。

With background-attachment: fixed;

Width background-attachment: scroll;