CSS如何实现渐变居中、文字置于渐变上且滚动时固定可见

直接调整CSS规则即可实现需求，核心是补全fixed定位的定位参数、居中规则和层级设置，具体代码如下：

完整调整后代码 #

CSS部分 #

#grad1{
  /* 保留原有的渐变背景设置 */
  background-image: linear-gradient(to right bottom ,rgb(103, 53, 168),rgb(32, 147, 179));
  /* 固定定位，滚动时始终停留在视口内 */
  position: fixed;
  /* 贴紧视口顶部 */
  top: 0;
  /* 水平居中配置 */
  left: 50%;
  transform: translateX(-50%);
  /* 提高层级，保证标题始终在页面其他内容上方 */
  z-index: 999;
  /* 加内边距撑开渐变区域，让渐变效果完整显示 */
  padding: 12px 24px;
  /* 设置高对比度文字颜色，保证文字在渐变背景上清晰可见 */
  color: #ffffff;
  /* 清除h1默认外边距，避免标题和视口顶部出现空隙 */
  margin: 0;
}

/* 测试用样式，模拟长页面方便验证滚动效果，实际项目可根据需求调整 */
body {
  min-height: 200vh;
  margin: 0;
  /* 给顶部留足够空间，避免页面内容被固定标题遮挡 */
  padding-top: 70px;
}

HTML部分 #

<h1 id="grad1">Hello Guys</h1>

关键调整点说明 #

• 原代码中align-self: center无法生效：该属性仅在父元素开启flex/grid布局时有效，fixed定位的元素是脱离普通文档流、相对于视口定位的，没有对应布局上下文时该属性不生效，改用left: 50%配合transform: translateX(-50%)是fixed元素水平居中的通用兼容方案。
• 固定不滚动逻辑：设置position: fixed+top:0后，元素就会脱离文档流，始终锚定在视口顶部位置，不会随页面滚动移动。
• 层级保证：设置z-index: 999把标题的堆叠顺序提到最高，滚动时页面其他内容会从标题下方穿过，不会覆盖标题。
• 文字显示逻辑：渐变是设置在h1元素上的背景，文字作为h1的内部内容，默认层级就高于元素背景，自然会显示在渐变效果之上，只要设置和背景反差足够的文字颜色即可保证可读性。

内容的提问来源于stack exchange，提问作者Frecoder