[英]CSS “background-size: cover” not working on Android device
我正在使用 Ionic 4 Angular 应用程序并设置<ion-slide>
样式以显示背景。
我正在使用background-size: cover;
在 CSS 中。 在浏览器和 iOS 设备上一切看起来都很完美,但是在 Android 设备上运行时,背景显示不正确。 我在下面附上了一些截图供参考。
HTML:
<ion-slide class="step-two">
<div class="slide-container">
<h1>Find</h1>
<p>Tap into stockists and discover where to buy your favourite beers.</p>
<ion-img class="swipe-img" src="../../assets/imgs/swipe.svg"></ion-img>
</div>
</ion-slide>
CSS:
.step-two {
background: linear-gradient(rgba(121, 168, 226, .9), rgba(0, 0, 0, .7)), url("../../assets/imgs/onboarding-bg2.jpg") no-repeat center;
background-size: cover;
color: var(--ion-color-primary-contrast);
}
.slide-container {
width: 80%;
}
iOS 设备上的正确显示:
Android 设备上的显示不正确:
我试图在幻灯片上设置一个高度,如下所示:
.step-two {
background: linear-gradient(rgba(121, 168, 226, .9), rgba(0, 0, 0, .7)), url("../../assets/imgs/onboarding-bg2.jpg") no-repeat center;
background-size: cover;
color: var(--ion-color-primary-contrast);
height: 100%; // This didn't work. The height was less than the view height of the device (about 30% in fact). Also tried 100vh which filled the view height but didn't fix the cover issue.
}
除了封面尺寸不正确之外,背景图像似乎也没有以 Android 为中心。
非常感谢任何帮助。 谢谢。
尝试使用“100% 100%”而不是使用背景大小作为“封面”。 它将根据容器设置图像的 100% 宽度和 100% 高度。 像这样:
background-size:100% 100%;
例子:
.step-two {
background: linear-gradient(rgba(121, 168, 226, .9), rgba(0, 0, 0, .7)), url("../../assets/imgs/onboarding-bg2.jpg") no-repeat center;
background-size: 100% 100%;
color: var(--ion-color-primary-contrast);
height: 100%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.