Safari 中的 CSS RGBA 透明度表现不同。我该如何解决？

Posted 2023-03-06

【中文标题】Safari 中的 CSS RGBA 透明度表现不同。我该如何解决？

【英文标题】：CSS RGBA Transparency in Safari behaves different. How could I fix it?

【发布时间】：2018-06-29 08:15:43

【问题描述】：

我的代码在每个浏览器中都运行良好，文本在半透明背景(background-color:rgba(0, 0, 0,.4)) 之上保持其白色不透明颜色。但是，在 Safari 中，背景透明度值不同（更轻），文本也受透明度影响，无法保持其全彩。我尝试将字体颜色 (color: #fff;) 仅更改为 H2 和 p，但没有成功。我花了很多时间试图解决这个问题，但我找不到解决方案。知道如何解决吗？

请在 Chrome 和 Safari 中查看。 谢谢你的帮助！！

这是我正在开发的网站：http://www.mattresszombie.com

这是我的html代码：

#prueba-block1 
  display: block;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  height: 150px;
  background-color:rgba(0, 0, 0,.4);
  margin-top: 90px;
  margin-bottom: 110px;
  color:#fff;
  text-align: center;
  position:relative;
  z-index: -7;


#prueba-block1 h2 
  font-size: 1.2em;
  font-stretch: expanded; 


#prueba-block1 p 
  font-size: 1.1em;
  letter-spacing: 1px;
  line-height: 0.8em;

<div id="prueba-block1">
  <h2>We are going to make mattress shopping simple!</h2>
  <p>This is an informational website to provide the facts about mattresses.</p>
  <p>We have no affiliation with any manufacturer, any retailer, any website, nor any brand.</p>
  <p><strong>Let's get started!</strong></p>
</div>

【参考方案1】：

这不是关于颜色透明度，而是关于z-index

请设置

z-index:1 到 #fixedz-index:-1 到 #container

并从#prueba-block1 中删除z-index: -7