根据文本的定位，淘汰文本效果背景消失？

Question

除了使用-webkit-background-clip设置为background-attachment之外，我使用fixed来创建淘汰文字效果，因此当用户滚动文字的背景时

section > h2{
    background-image: linear-gradient( to right bottom, rgba( 107, 187, 219, .7), rgba( 37, 149, 195, .7 ) ), url( '../images/background.jpg' );
    background-attachment: fixed;
    background-position: center center;
    background-repeat: repeat;
    background-size: cover;
    -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
    //margin: 40px 0 0 80px;
    font-size: 72px;
     font-weight: 900;
     margin-bottom: 60px;
     font-family: "Avenir";
     text-transform: uppercase;
}

我遇到的问题是，根据文本的位置，如果我将H2向右浮动，则不会显示任何内容。我可以突出显示文字，但背景不显示。

这是位于页面上的文本，当我调整浏览器窗口大小时，背景开始消失，但只有当background-attachment属性设置为fixed

时才会发生这种情况

Answer 1

您是否尝试过将 位置：相对; 添加到主div和 位置：绝对; 然后，翻译它以使其响应并且不会干扰位置绝对的其他对象？

一个例子：

.maindiv{
 position: relative;
}

h1#myid {
 position: absolute;
 top: 20%;
 left: 50%;
 transform: translate(-50%, -20%);
}

我希望我能帮到你，

问候，

Squarety。