[英]CSS background opacity turns gray and covers image on mobile only
Here is the goal. 这是目标。 Screenshot is taken from Desktop on Google Chrome:
屏幕截图来自Google Chrome上的桌面:
However that is not what it looks like on mobile. 但是,这并不是手机上的样子。 Shrinking the window size on desktop also gives the correct result, so I'm guessing it's not a matter of screen size, but platform.
缩小桌面上的窗口大小也可以得到正确的结果,因此我猜测这与屏幕大小无关,而与平台有关。 This is on a wordpress site, and the html for that section is:
这是在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)) ?>">
The CSS to get that effect is: 获得这种效果的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
}
However on mobile it looks like this: 但是在移动设备上,它看起来像这样:
You can see that the dark overlay is missing, which makes the text hard to read. 您会看到缺少深色覆盖层,这使文本难以阅读。 To try to solve the issue, I added additional rules to enforce the opacity for the overlay
为了解决此问题,我添加了其他规则来强制叠加层不透明
#athena-page-jumbotron {
background: rgba(0,0,0,0.4) !important;
}
However this results in the following effect, which is undesirable: 但是,这导致以下效果,这是不希望的:
As you can see, the overlay is still missing but there is a gray box. 如您所见,叠加层仍然缺失,但是有一个灰色框。 Changing the CSS to
background-color
instead of background
reverts it back to the original. 将CSS更改为
background-color
而不是background
将其恢复为原始background-color
。 Changing the opacity from 0.4 to 1 changes the gray box to black, and changing it to 0 makes the box white. 将不透明度从0.4更改为1会将灰色框更改为黑色,将其更改为0会使框变为白色。 Also adding a
@media
tag for the resolution doesn't help much. 另外,为该分辨率添加
@media
标签也无济于事。
Any help is greatly appreciated! 任何帮助是极大的赞赏!
You can easily do this with linear-gradient. 您可以使用线性渐变轻松地做到这一点。
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.