CSS背景不透明度变为灰色并仅覆盖移动设备上的图像

Question

这是目标。屏幕截图取自Google Chrome上的桌面：

然而，这不是它在移动设备上的样子。缩小桌面上的窗口大小也会得到正确的结果，所以我猜这不是屏幕大小的问题，而是平台问题。这是在wordpress网站上，该部分的html是：

<div id="athena-page-jumbotron" class="parallax-window" data-parallax="scroll" data-image-src="<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID)) ?>">

获得该效果的CSS是：

#athena-page-jumbotron {
 width: 100%;
 background-size: cover;
 height: 400px;
 overflow: hidden;
 background: rgba( 0,0,0,0.4 ); // this is what gives it the opacity
}

然而，在移动设备上，它看起来像这样：

您可以看到缺少暗覆盖，这使得文本难以阅读。 为了尝试解决这个问题，我添加了其他规则来强制执行叠加层的不透明度

#athena-page-jumbotron {
 background: rgba(0,0,0,0.4) !important;
}

然而，这会产生以下效果，这是不可取的：

如您所见，叠加层仍然缺失，但有一个灰色框。将CSS更改为background-color而不是background会将其还原为原始版本。将不透明度从0.4更改为1会将灰色框更改为黑色，将其更改为0会使框变为白色。同时为分辨率添加@media标记也无济于事。

非常感谢任何帮助！

Answer 1

您可以使用线性渐变轻松完成此操作。

＆＃13;

＆＃13;

.tinted-image {
  font-size: 32px;
  line-height:200px;
  color: white;
  text-align: center;
  width: 300px;
  height: 200px;
  background: 
    /* top, transparent red */ 
    linear-gradient(
      rgba(0, 0, 0, 0.45), 
      rgba(0, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(https://blogs.office.com/en-us/wp-content/uploads/sites/2/2017/06/June-updates-to-Get-and-Transform.jpg);
}

＆＃13;

<div class="tinted-image">
  about us
</div>

＆＃13;

＆＃13;

＆＃13;