在Safari中未显示伪背景叠加后-解网

问：

这仅在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 中，深色叠加不起作用，因此浅色背景上的白色文本几乎无法阅读，深色背景上的黑色文本也是如此。

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

HTML CSS Safari 伪元素

这是令人讨厌的事情，我没有 Mac，我只收到了来自团队成员转发的屏幕截图，该屏幕截图最初来自该网站的不同用户，他从 Safari 发送了屏幕截图，所以我的工具/信息真的很有限。你能检查一下你是否能看到这张图片上的浅色叠加和深色文字吗？safehavenbolton.co.uk 谢谢

1赞 Rayees AC 9/14/2023

使用浏览器前缀：Safari 浏览器有时需要为某些 CSS 属性添加供应商前缀。例如，您可能需要将 -webkit-background 用于与背景相关的特定属性。检查使用这些前缀是否能解决问题。

1赞 A Haworth 9/15/2023

某些版本的 Safari 在后台附件方面遇到困难：已修复。请参阅 caniuse.com/?search=background-attachment%3A%20fixed 如果您能找到导致问题的 Safari 版本和操作系统，这可能有助于追踪问题。

1赞 A Haworth 9/15/2023

您的网站在我的iPad（最新版本的Safari）上看起来不错。

答： 暂无答案

上一个：如何使用 Tailwind CSS 创建伪边框内容

下一个：时尚/手写笔：A：访问和A：链接仅影响某些网站

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

after pseudo background overlay not showing in safari

评论