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将其恢复为原始background-color 。 将不透明度从0.4更改为1会将灰色框更改为黑色，将其更改为0会使框变为白色。 另外，为该分辨率添加@media标签也无济于事。

任何帮助是极大的赞赏！

Answer 1

您可以使用线性渐变轻松地做到这一点。

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

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