html - 图片未在特定手机上显示

Question

在某些移动设备上，页面顶部的图像无法显示。另一方面， Logo 正在显示。区别在于图像和背景图像。没有显示的是背景图片。

div 具有高度和宽度以及背景色。因此，如果背景图像不工作，颜色应该是可见的，但它不是。

图像未显示在具有以下设置的特定手机上:诺基亚 8.1 Chrome 74.0.3729.157安卓9

在这里你可以找到打印屏幕诺基亚，所以没有图片:

Iphone，带图片:

我已经将 .background 类的位置从静态改为相对。和删除器 mix-blend-mode: multiply;

但没有任何效果。图像显示的高度，但它只是一个空白区域。

<div class="header">
    <a class="logo" href="/">
        <img src="/images/logo.png" alt="">
    </a>
    <div class="background">
        <div class="mas"></div>
    </div>
</div>

.header{
    position: relative;
    .logo{
        color: black;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 3.5em;
        letter-spacing: 5px;
        text-decoration: none;
        position: relative;
        z-index: 100;
        img{
            width: 120px;
            margin-bottom: 10px;
            margin-left: -22px;
        }
    }
    .background{
        position: relative;
        width: 100%;
        height: 300px;
        margin-top: 0;
        background: $baseColor;
        z-index: 50;
        .mas{
            width: 100%;
            height: 300px;
            margin-top: 40px;
            bottom: 0;
            top: auto;
            position: absolute;
            right: 0;
            background-image: url(/images/antwerpse_fluisteraar.jpg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            opacity: 0.8;
        }
    }
}

Answer 1

试试这个，希望对你有帮助

     .background{
        position: absolute;
        width: 100%;
        height: 300px;
        margin-top: 0;
        background: $baseColor;
        .mas{
            width: 100%;
            height: 300px;
            margin-top: 40px;
            position: relative;
            background-image: url(/images/antwerpse_fluisteraar.jpg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
           opacity: 0.8;
       }
   }