Safari浏览器中CSS RGBA透明度表现异常，如何修复？

我之前也碰到过Safari这个烦人的渲染bug！核心原因是Safari对带有负z-index的元素处理RGBA背景时，会错误地将整个元素（包括子元素文本）都应用透明度，而不是仅作用于背景。同时负z-index还会导致Safari对RGBA的alpha值计算出现偏差，让背景看起来更浅。

解决方案步骤： #

1. 移除负z-index（优先推荐）

你的#prueba-block1设置了z-index: -7，这是触发问题的关键。如果不是必须让这个元素处于其他元素下层，直接移除这个属性：

#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 */
}

2. 用伪元素隔离背景透明度（如果必须保留层级）

如果你确实需要让元素保持层级关系，改用伪元素单独渲染半透明背景，这样文本不会受到透明度影响：

#prueba-block1 { 
  display: block; 
  width: 100%; 
  padding-top: 5px; 
  padding-bottom: 5px; 
  height: 150px; 
  /* 移除原background-color */
  margin-top: 90px; 
  margin-bottom: 110px; 
  color:#fff; 
  text-align: center; 
  position:relative; 
  z-index: -7; /* 保留你的层级需求 */
}

/* 添加伪元素实现背景 */
#prueba-block1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: -1; /* 让伪元素在文本下方 */
}

3. 确保文本样式不被继承

虽然你已经设置了color: #fff，可以再明确给子元素添加opacity: 1（Safari偶尔会有奇怪的继承问题）：

#prueba-block1 h2, #prueba-block1 p {
  color: #fff;
  opacity: 1; /* 强制文本不透明 */
}

修改后的完整代码示例： #

<style>
#prueba-block1 { 
  display: block; 
  width: 100%; 
  padding-top: 5px; 
  padding-bottom: 5px; 
  height: 150px; 
  margin-top: 90px; 
  margin-bottom: 110px; 
  color:#fff; 
  text-align: center; 
  position:relative; 
}

#prueba-block1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: -1;
}

#prueba-block1 h2 { 
  font-size: 1.2em; 
  font-stretch: expanded; 
}
#prueba-block1 p { 
  font-size: 1.1em; 
  letter-spacing: 1px; 
  line-height: 0.8em; 
}
</style>

<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>

这个方案能确保在Safari和Chrome中表现一致：背景保持半透明，文本纯白不透明。

内容的提问来源于stack exchange，提问作者Danella