Question

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

div具有高度和宽度以及背景颜色。因此，如果背景图片不起作用，则该颜色应该可见但不可见。

在以下特定手机上，图像未显示：诺基亚8.1 铬74.0.3729.157 Android 9

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

iPhone，带有图片：

我将类.background的位置更改为相对而非静态。以及删除器mix-blend-mode：乘法;

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

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

图片未显示在特定手机上

1 个答案: