css 设置伪元素的混合模式

vfwfrxfs 于 2023-06-25 发布在其他

关注(0)|答案(1)|浏览(152)

我正在尝试在CSS中重新创建Photoshop效果。我有一个图像背景上的大尺寸的文字，我想文字有一个浅色的阴影。此效果是在Photoshop中使用外部辉光效果产生的，辉光具有“屏幕”混合模式。

由于阴影的扩展很大（阴影的膨胀很大），使用text-shadow属性是不切实际的，因为它会创建大尺寸的斑点，效果看起来与上面的预览不同。正因为如此，我在::after中的文本下面创建了一个类似阴影的模糊背景。这使我可以使它平滑模糊（没有斑点）。

我希望::after presudo-element中类似阴影的背景有一个特殊的混合模式，特别是screen。我知道我一般可以使用mix-blend-mode，但在这个场景中似乎不起作用。有没有办法为::after伪元素设置混合模式？
这就是我的：CSS：

.container {
  padding: 35pt;
  text-align: center;
  background: url("../images/background.jpg") no-repeat;
  background-size: cover;
  background-position-y: -2pt;
  position: relative;
}

.container h1 {
  text-align: center;
  font-size: 26pt;
  font-weight: 700;
  margin: 0pt auto -10pt auto;
  padding: 10pt 30pt;
  z-index: 100;
  display: inline-block;
}

.container h1::after {
  mix-blend-mode: overlay;
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: radial-gradient(
      circle at center,
      rgba(224,235,245,0.9) 20%,
      rgba(224,235,245,0.8) 90%
  );
  border-radius: 50px;
  filter: blur(15px);
  z-index: -1;
}

HTML：

<div class = "container">
  <h1>Hello World! This is a long text.</h1>
</div>

css

来源：https://stackoverflow.com/questions/76529917/setting-a-blending-mode-for-a-pseudo-element

1条答案

按热度按时间

f3temu5u1#

你就快成功了。您需要将position: relative添加到h1，以便伪元素将其用作引用，然后将z-index添加到容器以创建堆栈上下文，但不要在h1上设置任何z-index。
有关详细信息的相关问题：Why can't an element with a z-index value cover its child?

.container {
  padding: 35pt;
  text-align: center;
  background: url("https://picsum.photos/id/1018/800/300") no-repeat;
  background-size: cover;
  background-position-y: -2pt;
  position: relative;
  z-index: 0;
}

.container h1 {
  text-align: center;
  font-size: 26pt;
  font-weight: 700;
  margin: 0pt auto -10pt auto;
  padding: 10pt 30pt;
  display: inline-block;
  position: relative;
}

.container h1::after {
  mix-blend-mode: overlay;
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
      circle at center,
      rgba(224,235,245,0.9) 20%,
      rgba(224,235,245,0.8) 90%
  );
  border-radius: 50px;
  filter: blur(15px);
  z-index: -1;
}

<div class="container">
  <h1>Hello World! This is a long text.</h1>
</div>

赞(0）回复(0）举报 2023-06-25

我来回答

css 设置伪元素的混合模式

1条答案

相关问题

热门标签

最新问答