CSS position:fixed 导致更高的 z-index box-shadow 失败答案

【问题标题】：CSS position:fixed causes higher z-index box-shadow to failCSS position:fixed 导致更高的 z-index box-shadow 失败
【发布时间】：2021-03-27 21:07:26
【问题描述】：

我正在使用伪元素在 div 上创建发光效果 (box-shadow)。

发光 div 下方的“背景”div 是 position:fixed。当我将 lower/bg div 设置为 position:absolute 时，一切看起来都很好。

但是当它是position:fixed（我需要）时，Safari 会以低得多的不透明度显示框阴影。 Firefox/Chrome 都可以。

知道如何解决 Safari 的问题吗？

body {
  background-color: #39f;
}

#mybackground {
  z-index: -15;
  width: 100%;
  top: 0;
  bottom: 0;
  position: fixed;
  /* With position:absolute, it's good, but position:fixed makes the box-shadow below very light */
  background-image: url("image.png");
  background-size: 100% 100%;
}

#mytext {
  position: relative;
  width: 150px;
  margin: 50px auto;
}

#mytext:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -10;
  box-shadow: 0 0 25px 25px #060;
  -webkit-box-shadow: 0 0 25px 25px #060;
}

<body>
  <div id="mybackground"></div>
  <div id="mytext">This is a test</div>
</body>

【问题讨论】：

请在codepen上提供您的代码sn-ps，以便我可以帮助您
你的 safari 版本是什么？

标签： html css

【解决方案1】：

根据safari版本，视情况而定。

如果 Safari 3.1 - 4

部分支持前缀-webkit-

-webkit-box-shadow: 0 0 25px 25px #060;

如果 Safari 5

支持前缀-webkit-

-webkit-box-shadow: 0 0 25px 25px #060;

如果 Safari 5.1 - 14

box-shadow: 0 0 25px 25px #060;

如需进一步说明，请关注https://caniuse.com/css-boxshadow

【讨论】：