在iPhone上不显示背景图像
问题描述:
如何在iPhone上显示背景图像并显示在Android上?在iPhone上不显示背景图像
HTML
<div class="bgimg-1">
<div class="hometoptext ">
<h1 class="text-center">
Africa's First Online Business Lender
</h1>
<div>
<h3 class="thin">Grow faster with South Africa's most innovative online funder</h3>
</div>
<div class="text-center">
<button class="btn btn-primary" (click)="applyNow()">APPLY NOW</button>
</div>
</div>
<div class="bottom-arrow text-center">
</div>
</div>
背景图像不会在Android上显示iPhone
CSS
.bgimg-1 {
background-image: url("img/main_pic2.png");
color: white;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-color: #999;
position:relative;
width:100%;
min-height: 100vh;
top: 0;
}
图片:
图片上iPhone:
答
- 的iOS的Safari具有
background-size: cover;
+background-attachment: fixed
错误行为; - Safari(OS X和iOS)和Chrome不支持背景大小:100% px;与SVG图像结合使用时,它将原始大小保留为 ,而其他浏览器正确拉伸矢量图像 ,同时保留指定像素数的高度。
- iOS Safari在 页面的主体上具有
background-size: cover;
错误行为。 - macOS Safari 10发生帧率问题
background-size
。 - 的Android 4.3浏览器及以下的报道不支持百分比 在
background-size
编号:Link
答
一个可能的解决这个问题仍然是一个纯CSS后备
CSS Tricks有三大方法,后两者是CSS3的封面不起作用的后备。
HTML
<img src="img/main_pic2.png" id="bg" alt="">
CSS
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspect ratio */
min-width: 100%;
min-height: 100%;
}
?它与到Android? –
@VladMatvienko因为它显示在Android上,我猜。 – the4kman
我喜欢我们为编辑而编辑@VladMatvienko –