图片未显示在特定手机上

debugcn 发表于 Dev

玩笑

在某些移动设备上，页面顶部的图像不显示。另一方面，徽标正在显示。区别在于图像和背景图像。没有出现的是背景图像。

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

该图像未在此特定手机上显示设置：诺基亚 8.1 Chrome 74.0.3729.157 Android 9

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

iphone，有图：

我已将 .background 类的位置更改为相对而不是静态。和删除器混合混合模式：乘法；

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

<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;
        }
    }
}

谢赫纳迪姆

试试这个我希望它会帮助你

     .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;
       }
   }