gpt4 book ai didi

CSS 将文本阴影的 z-index 放在背景后面

转载 作者:行者123 更新时间:2023-11-27 22:51:22 25 4
gpt4 key购买 nike

在网络上搜索其他使用 CSS 为半个字符着色的解决方案后,我发现了这个:http://jsbin.com/rexoyice/1 .在根据我的目的进行了一些小的调整之后,我实现了它。我曾计划在此使用文本阴影。阴影覆盖了实际上由背景着色的“文本”。我是 CSS 的新手,不知道如何使用 z-indexing 将文本阴影放在背景后面。如果 z-indexing 不是理想的解决方案,我愿意接受其他人可能提出的其他解决方案。

在下面的代码中,最上面一行应用了阴影,而下面一行没有。

.HalfColor
{
display: inline;
font-size: 30px;
background: linear-gradient(0, #7db9e8 50%,#1e5799 50%);
-webkit-background-clip: text;
background-clip: text;
/*^For compatibility*/
color: transparent;
/*text-shadow:0 0 0 #0000 !important*/
}

p
{
text-shadow: 1px 1px 2px #000;
}
<!DOCTYPE html>
<html>
<body>
<b>
<p class="HalfColor">TEST!</p>
<br>
<span class="HalfColor">TEST!</span>
</b>
</body>
</html>

最佳答案

改用投影滤镜:

.HalfColor {
display: inline;
font-size: 30px;
background: linear-gradient(0, #7db9e8 50%, #1e5799 50%);
-webkit-background-clip: text;
background-clip: text;
/*^For compatibility*/
color: transparent;
}

p {
filter: drop-shadow(1px 1px 2px #000);
}
<!DOCTYPE html>
<html>

<body>
<b>
<p class="HalfColor">TEST!</p>
<br>
<span class="HalfColor">TEST!</span>
</b>
</body>

</html>

关于CSS 将文本阴影的 z-index 放在背景后面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59431929/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com