极客观点
项目管理
HarmonyOS
伪元素实现文字渐变加阴影时，祖父背景遮挡伪元素的情况
一般实现文字渐变加阴影，就是使用伪元素绝对定位实现。下面的代码能够实现效果。
<style>
.header {
width: 100%;
height: 100px;
}
.text {
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to bottom, red 0%, green 100%);
-webkit-background-clip: text;
background-clip: text;
font-size: 40px;
font-weight: bold;
letter-spacing: 9px;
}
.text::before {
content: attr(data-text);
position: absolute;
color: transparent;
text-shadow: 0 4px 2px blue;
z-index: -1;
}
</style>
<body>
<div class="header">
<p class="text" data-text="测试测试">测试测试</p>
</div>
</body>效果
但在需求中，header也有一个背景，当我为header（也就是伪元素的祖父）加上背景时，伪元素被覆盖了
后续解决办法是为header加上相对定位和z-index:但却跟z-index取值无关，z-index从-999到999效果都是不变的。
最开始的猜测：怀疑祖父背景遮盖伪元素，为此我去MDN看了一下z-index的解释，层叠上下文中子元素不会跟外部元素进行层级比较，而是和父元素作为整体参与外层层叠上下文啊。
后来发现：祖父z-index的取值并不影响效果，确实符合“层叠上下文中子元素不会跟外部元素进行层级比较”。
没明白这里祖父背景和伪元素的关系
伪元素是一个“不存在”的 dom 节点，是在父元素内出现的，比如一个
<div><img /></div>这样的结构，img是div的子元素，同时，这个div有两个伪元素存在于，如果对::before和::after设置了content: ''属性后，会在 devtools 中看到div的结构是这样的：简单粗暴理解就是，这个时候，伪元素是与
img同级的，但是存在顺序关系的两个“元素”。为什么要提到顺序关系呢，因为在层叠的时候，dom 中后出现的元素会覆盖之前出现的元素，除非你用
z-index改变。至于
z-index的值，是正还是负，这就是另外一个话题了。如果是负值的话，会跑到父元素下面去，而父元素如果有背景色的话，那么这个设置了
z-index负值的元素可能就看不到了。