时间戳

首页 > 解决方案 > Background-color:rgba() - Safari 透明度 css 错误

html - Background-color:rgba() - Safari 透明度 css 错误

问题描述

我使用 rgba(0,0,0,0.5) 作为背景颜色属性，它在除我朋友的 macbook 上的 safari 版本 12.0.2 之外的所有浏览器中都能正常工作我也在使用https://www.lambdatest.com /来测试浏览器的兼容性，它在他们的 safari 浏览器上工作得很好，除了我朋友的 macbook 之外的任何地方，任何 ides 可能是什么问题？

我不能使用 HEX 代码和不透明度规则，因为这也会影响这个 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>

标签： htmlcsssafaribackground-colorrgba

解决方案

好的，现在这真的很奇怪，但是当我使用 rgba(0, 0, 0, 0.5) 时，背景根本不可见，但是当我使用 rgba(0,0,0,0.51) 或 0.49 时，它正在工作，只是完全没有显示 rgba 上 50% 的不透明度。我不知道是什么原因造成的。

编辑：

当您使用“0.5”时，Safari 版本 12.0.2 有时会出现使用 rgba 渲染不透明度的问题，但当您使用“.5”（不带零）时，这没关系。我不知道是什么原因造成的，也许它已经在较新版本的 safari 中修复了。

推荐阅读