伪背景叠加后在 Safari 中不显示

Question

这只是 Safari 上的一个问题，不会在背景图像顶部显示透明覆盖层，它在所有其他浏览器中工作正常。我查看了其他建议的问题，甚至尝试了此问题的修复：[https://stackoverflow.com/questions/21057154/after-pseudo-element-not-working-in-safari][1] 但是这并没有解决问题。

所以我只是有一个相对定位的容器，上面有一个背景图像，一个绝对定位的子 div，它有一个覆盖背景的透明背景颜色，最后是一些位于两者之上的内容。

以下是我需要的基本示例以及除 Safari 之外的所有其他版本中有效的示例：

section {
  background-image:url('https://www.encompasscorporation.com/wp-content/uploads/2015/09/example-background.jpg');
  background-size: cover;
    height: 100vh;
    position: relative;
    width: 100vw;
    background-attachment: fixed;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

section:after {
    content: '';
    background: rgb(0 0 0 / 60%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

section h1 {
  color: white;
  z-index: 1;
}

<section>
  <h1>
    Example content
  </h1>
</section>

在 Safari 中，深色覆盖不起作用，因此浅色背景上的白色文本几乎无法阅读，深色背景上的黑色文本也是如此。

还有其他人遇到过这个问题或者可以帮忙吗？

Answer 1

您似乎正在尝试在

<section>

元素内的背景图像顶部创建透明叠加层，并且您希望这也能在 Safari 中工作。您遇到的问题可能与 Safari 使用伪元素和

background-attachment: fixed

属性的渲染行为有关。为了解决这个问题，您可以尝试以下方法：

1. 使用 RGBA 作为背景颜色:

不要使用

rgb

函数指定背景颜色，而是使用

rgba

函数通过 alpha（透明度）值定义背景颜色。有时这在 Safari 中效果更好。

section:after {
    content: '';
    background: rgba(0, 0, 0, 0.6); /* Adjust the alpha value as needed */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

2. 强制 GPU 加速:

有时，Safari 可能无法按预期呈现某些 CSS 属性。要强制 GPU 加速，您可以尝试将具有

-webkit-transform

值的

translate3d(0,0,0)

属性添加到

section:after

伪元素中：

section:after {
    content: '';
    background: rgb(0 0 0 / 60%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: translate3d(0,0,0); /* Force GPU acceleration in Safari */
}

3. 使用多个背景：

您可以将背景颜色直接应用于

section

元素作为单独的背景层，而不是使用伪元素进行覆盖：

section {
    background-image: url('https://www.encompasscorporation.com/wp-content/uploads/2015/09/example-background.jpg'), linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)); /* Adjust the alpha value as needed */
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    height: 100vh;
    position: relative;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

通过使用多个背景，您可以直接控制叠加层的透明度。

单独或组合尝试这些方法，看看哪一种最适合您在 Safari 中的具体情况。请记住，浏览器渲染行为有时可能会有所不同，因此在不同版本的 Safari 中进行测试也可能会有所帮助。