[英]Background Image not displaying on iPhone
How do I make the background image display on iPhone as it displays on Android?如何使背景图像在 iPhone 上显示为在 Android 上显示?
HTML 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>
Background Image not displaying on iPhone背景图像不显示在 iPhone 上
CSS 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;
}
Image on Android: Android上的图像:
Image on iPhone: iPhone上的图像:
background-size: cover;
background-size: cover;
上有错误行为。 + background-attachment: fixed
; background-attachment: fixed
;background-size: cover;
background-size: cover;
上有错误行为。 on a page's body.background-size
. background-size
存在帧速率问题。background-size
background-size
百分比A possible solution to this issue is still a pure CSS Fallback这个问题的一个可能的解决方案仍然是纯 CSS Fallback
CSS Tricks has three great methods, the latter two are fall backs for when CSS3's cover doesn't work. CSS Tricks有三个很棒的方法,后两个是当 CSS3 的封面不起作用时的后备。
HTML HTML
<img src="img/main_pic2.png" id="bg" alt="">
CSS CSS
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspect ratio */
min-width: 100%;
min-height: 100%;
}
The background image is not supported on iOS devices. iOS 设备不支持背景图像。 Proof link: https://caniuse.com/?search=background-url
证明链接: https ://caniuse.com/?search=background-url
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.