在 CSS 中将渐变对齐到中心

Question

我希望渐变位于页面的中心，文本位于该渐变上。

 #grad1{ background-image: linear-gradient(to right bottom ,rgb(103, 53, 168),rgb(32, 147, 179)); position: fixed; align-self: center; }

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

我希望这个标题位于顶部并且在中心也放置在渐变上。 同样在滚动时，我不希望它与页面一起上升，即使我已经滚动到页面底部，它也应该随时可见。

Answer 1

考虑到' h1 '标签不在任何块级祖先和' h1 '标签上给出的' fixed '位置属性内，' h1 '标签的包含区域将由视口或页面区域建立。

大多数情况下， 包含区域是元素最近的块级祖先的内容区域。 在我们的例子中，包含区域是视口。

因此，如果我们在h1标签上应用left和top属性，我们将根据视口宽度进行计算。

#grad1 {
  background-image: linear-gradient(to right bottom ,rgb(103, 53, 168),rgb(32, 147, 179));
  position: fixed;
  align-self: center;
  left: 50%;
  top: 0;
}

以上将把' h1 '标签移动到视口宽度左侧50%。 现在，我们需要将h1标签文本向后移动一半宽度。 这可以使用transform-translate属性来实现。

例如 -

#grad1 {
  background-image: linear-gradient(to right bottom ,rgb(103, 53, 168),rgb(32, 147, 179));
  position: fixed;
  align-self: center;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
}

希望这对你有帮助！