时间戳

首页 > 解决方案 > 敲除文本效果背景消失取决于文本的定位？

html - 敲除文本效果背景消失取决于文本的定位？

问题描述

-webkit-background-clip除了使用background-attachmentset asfixed所以当用户滚动文本移动的背景时，我还用于创建剔除文本效果

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

在此处输入图像描述

标签： htmlcss

解决方案

您是否尝试过使用position: relative; 到主 div 和位置：绝对；然后对您的文本进行翻译以使其具有响应性并且不干扰绝对位置的其他对象？

一个例子：

.maindiv{
 position: relative;
}

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

希望对你有帮助

问候，

方正。

推荐阅读