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>