Question

我的代码在每个浏览器中运行良好，文本将其白色不透明颜色保留在半透明背景(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>

Answer 1

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

请设置

z-index:1至#fixed
z-index:-1至#container

并从z-index: -7

中删除#prueba-block1

CSS RGBA Safari中的透明度表现不同。我该怎么办呢？

1 个答案: