Question

我使用rgba（0,0,0,0.5）作为background-color属性，它在我的朋友的MacBook上的safari版本12.0.2除外的所有浏览器中都可以正常工作，我也使用https://www.lambdatest.com/测试浏览器的兼容性，它可以在他们的野生动物园浏览器上正常工作，除了我的朋友Macbook之外，几乎在所有地方都可以，可能是什么问题？

我不能使用十六进制代码，然后再使用不透明规则，因为这也会影响此div顶部的按钮，而且只有rgba不能在我的朋友笔记本电脑上工作，rgb或hex可以，但是我需要使用rgba，因为不透明

兼容性表显示safari 2.0+支持rgba，所以我认为没有理由不应该在safari 12.0.2上使用它

有什么想法可能导致这种情况吗？

.initialPanel {
  overflow: hidden;
  width: 900px;
  height: 130px;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center
}

.initialPanelWrap {
  position: absolute;
  width: 100%;
  bottom: 35%;
  display: flex;
  justify-content: center
}

.HpButtonGreen {
  height: 60px;
  width: 360px;
  background-color: #1e983e!important;
  color: white;
  border: none;
  cursor: pointer;
}

.HpButtonGreen:hover {
  background-color: #0F792B!important;
  -webkit-transition: background-color 300ms linear;
  -ms-transition: background-color 300ms linear;
  transition: background-color 300ms linear;
}

<div class="initialPanelWrap">
  <div class="initialPanel">
    <div class="riadok">
      <div class="butcol margin-right-30"><button class="HpButtonGreen" type="button"></button></div>
      <div class="butcol"><button class="HpButtonGreen" type="button"></button></div>
    </div>
  </div>
</div>

Answer 1

好吧，现在这真的很奇怪，但是当我使用rgba（0，0，0，0.5）时，背景完全看不见，但是当我使用rgba（0,0,0,0.51）或0.49时，它就可以了，完全没有显示出rgba的确切50％不透明度。我不知道是什么原因造成的。

Background-color：rgba-Safari 12.0.2是否有问题？

1 个答案: