Question

我正在尝试让阴影效果很好地在不同背景下播放。标准方法似乎是使用mix-blend-mode，并在具有效果的真实div后面应用假div。

this technique here的示例（单击右上角的+图标）。

如果我稍稍更改此代码以将非背景元素包装到带有position: fixed的容器中，则会中断example here。请注意，position: absolute可以正常工作。

我确实需要一个像示例一样的结构，一个position-fixed的父级，并可以容纳可变高度或宽度的混合，以及.box元素的多个实例。我可以粗略地猜测为什么它不起作用（固定将其从文档流中分离出来，因此没有什么可混合的），尽管如此，我看不出有什么办法。

我制作的另一个示例可以使事情减少更多，请注意，如果您注释掉position-fixed，它会如何工作：

.blend {
  height: 100%;
  box-shadow: 0 4px 8px 0 rgba(156, 156, 156, 0.7);
  mix-blend-mode: multiply;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
}

.box {
  background: grey;
  min-height: 10px;
  width: 100%;
  position: relative;
  margin: 0 0 15px;
}

.container {
  /* using absolute works */
  position: absolute;
  /* using fixed does not work */
  position: fixed;
  height: 50%;
  width: 50%;
}

html {
  height: 100%;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
}

.column {
  position: relative;
  width: 50%;
  height: 100%;
}

.left {
  background: #2D2D2D;
}

.right {
  background: #f6f6f6;
}

<div class="column left"></div>
<div class="column right"></div>

<div class="container">
  <div class="box">
    text
    <div class="blend"></div>
  </div>
  <div class="box">
    text<br /><br />more text
    <div class="blend"></div>
  </div>
</div>

（我看到了一个previous question，它的外观相似，但是我无法让他们的示例进行检查）

Answer 1

您可以将blend元素移出容器，并使其固定尺寸与容器相同。

签出代码段：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

html{
  height:100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
}

.column {
  position: relative;
  width: 50%;
  height: 100%;
}

.left {
  background: #2D2D2D;
}

.right {
  background: #f6f6f6;
}

.blend {
  box-shadow: 0 4px 8px 0 rgba(156, 156, 156, 0.7);
  mix-blend-mode: multiply;
  position: fixed;
  height: 50%;
  width: 50%;
}

.box {
  background: grey;
  height: 100%;
  width: 100%;
  position: absolute;
}

.container {
  position: fixed;
  height: 50%;
  width: 50%;
}


</style>
</head>
<body>

<div class="column left"></div>
<div class="column right"></div>

<div class="blend"></div>
<div class="container">
	
  <div class="box">
    text
  </div>
</div>

</body>
</html>

Answer 2

3.2。特定于HTML的行为

CSS中创建堆栈上下文的所有内容均应视为“隔离”组。 HTML元素本身不应创建组。应用了混合的元素必须与该元素所属的堆栈上下文的所有基础内容混合。

例如。 position: fixed将创建一个堆栈上下文（隔离组）。

https://drafts.fxtf.org/compositing-1/#csscompositingrules_CSS

有关堆叠上下文的更具体答案：https://stackoverflow.com/a/56545440/7947839

位置：固定的是否破坏了混合混合模式，是否有解决方法？

2 个答案: