英文:
Setting a blending mode for a pseudo-element
问题
我正在尝试在CSS中重新创建Photoshop效果。我有一个放在图像背景上的大号文本，并且我希望文本具有浅色阴影。这个效果是在Photoshop中使用Outer Glow效果创建的，阴影具有"screen"混合模式。
由于阴影具有较大的扩展（阴影的扩展较大），使用text-shadow属性是不实际的，因为它在大号文本上会产生斑点，而且效果看起来与上面的预览不同。因此，我在::after中创建了一个类似阴影的模糊背景。这使我能够使其平滑模糊（没有斑点）。
我希望::after伪元素中的阴影样式背景具有特殊的混合模式，特别是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>
<details>
<summary>英文:</summary>
I am trying to recreate a Photoshop effect in CSS. I have a large sized text on an image background, and I would like the text to have a light colored shadow. This effect is produced in Photoshop using the Outer Glow effect, with the glow having "screen" blending mode.
[![The effect I am trying to recreate][1]][1]
Since the shadow has large spread (large dilation of the shadow), using the `text-shadow` property is impractical since it creates blobs on large sizes and the effect simply looks different from the preview above. Because of that, I am creating a shadow-like blurred background below the text in `::after`. This allows me to make it smoothly blurred (no blobs).
[![Result of HTML & CSS below][2]][2]
I would like the shadow-like background in the `::after` presudo-element to have a special blending mode, specifically `screen`. I know I can use `mix-blend-mode` in general, but it does not seem to work in this scenario. Is there any way to set blending mode for the `::after` pseudo-element?
This is what I have:
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>
[1]: https://i.stack.imgur.com/S1McN.jpg
[2]: https://i.stack.imgur.com/Nx2Z4.jpg
</details>
# 答案1
**得分**: 0
你已经接近成功了。你需要在h1元素中添加`position: relative`，这样伪元素才能以它作为参考点，然后在容器上添加`z-index`来创建一个堆叠上下文，但不要在h1上设置任何`z-index`。
有关更多详细信息，请参考相关问题：https://stackoverflow.com/q/54897916/8620333
```css
.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>
英文:
You are almost there. You need to add position: relative to the h1 so the pseudo element use it as reference then add z-index to the container to create a stacking context but don't set any z-index on the h1.
Related question for more detail: https://stackoverflow.com/q/54897916/8620333
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
<div class="container">
<h1>Hello World! This is a long text.</h1>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论