html - 背景颜色在 Safari 中不可见

Question

.chevron {
      position: relative;
      text-align: center;
      padding: 12px;
      margin-bottom: 6px;
    }
.chevron:before {
      content: '';
      position: absolute;
      top: 40px;
      left: 0;
      height: 100%;
      width: 60%;
        background-color: rgb(9, 73, 131);
      background-color: rgba(9, 73, 131, 1);
      transform: skew(0deg, 6deg);
        -webkit-transform: skew(0deg, 6deg);
        -moz-transform: skew(0deg, 6deg);
        -ms-transform: skew(0deg, 6deg);
        -o-transform: skew(0deg, 6deg);
    }
.chevron:after {
      content: '';
      position: absolute;
      top: 40px;
      right: 0;
      height: 100%;
      width: 60%;
        background-color: rgb(9, 73, 131);
      background-color: rgba(9, 73, 131, 1);
      transform: skew(0deg, -6deg);
        -webkit-transform: skew(0deg, -6deg);
        -moz-transform: skew(0deg, -6deg);
        -ms-transform: skew(0deg, -6deg);
        -o-transform: skew(0deg, -6deg);
    }

我有一个 Wordpress 项目，我在其中添加了背景颜色。背景颜色适用于除 Safari 之外的所有浏览器。我尝试了多种方法，例如给 rgb（对于旧浏览器）rgba（对于最新浏览器），但它仍然不可见。

标签： htmlcss

Answer 1

试试下面的 safari 浏览器 CSS。

_::-webkit-full-page-media, _:future, :root .chevron:before{
    background-color: rgb(9, 73, 131);
}
_::-webkit-full-page-media, _:future, :root .chevron:after{
    background-color: rgb(9, 73, 131);
}