Question

我在我的css中设置了背景图像，桌面上的所有东西看起来都很好但是当我尝试在我的ipad或iphone 6上观看时，我根本没有得到图像（甚至没有关闭 - 中心图像）。

如何确保我的图片调整大小，居中并显示在手机上？

.landpage-img {
    background: url('../img/bg-neon-01-2000x1333.jpg') center center no-repeat fixed !important;
    height: 1333px;
    background-size: cover;
}

@media only screen and (max-width: 1024px) {
    .landpage-img {
        background: url('../img/bg-neon-01-1024x671.jpg') 50% 0 no-repeat center center fixed !important;
        height: 671px;
        background-size: cover;
    }
}
@media only screen and (max-width: 991px) {
    .landpage-img {
       background: url('../img/bg-neon-01--991x649.jpg') 50% 80% center center no-repeat fixed;
       height: 649px;
     background-size: cover;
           }
}
@media only screen and (min-width: 0px) and (max-width: 767px) {
    .landpage-img {
        background: url('../img/bg-neon-01--767x502.jpg') 50% 80% no-repeat fixed !important;
        height: 767px;
        background-size: cover;
    }
}

Answer 1

我不确定您使用的是哪种图像，但这应该可以解决问题（无需进行媒体查询）。

for

另请参阅https://www.w3schools.com/css/css_background.asp

css背景图像不会显示在iphone上或在桌面上的任何设备上正确显示

1 个答案: