css - 将 h1 文本附加到背景(用于基本视差效果)纯 CSS，同时在 div 中保持对齐

Question

尝试在 #imgh 中用我的背景和站点标题创建视差效果div，但我想不出一种方法来将文本“固定”在背景上(就好像它们是单个元素一样)，同时将其保持在居中位置。

我知道我可以通过使用 position: fixed; 来实现这一点，但这会使我的文本居中对齐无效，我不想失去居中对齐。试图找到一种我可以同时拥有两者的方法。当前代码如下:

#grid
{
    z-index:5;
    position:relative;
    width:100%;
    height:100%;
    
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:minmax(auto);
    grid-gap: 0px;
    grid-template-areas:
        "imgh imgh imgh imgh"
        "cont cont cont cont";
}

#imgh
{
    grid-area: imgh;
    background-image: url("https://www.web-designindia.com/images/header-form-banner.jpg");
    background-size: 100%;
    background-position: bottom;
    background-attachment: fixed;
    height:20vw;
    opacity: .9;
}

#imgh h1
{
    color:white;
    text-shadow: 4px 4px 8px #000;
    font-size: 5vw;
    font-family: "Bodoni MT";
    text-align: center;
    transform: translateY(55%);
}

#cont
{
    grid-area: cont;
    height:90vw;
    background-color:white;
}

<div id="grid">
    <div id="imgh">
        <h1>Header Text</h1>
    </div>
    <div id="cont">
        <p>this is a paragraph</p>
    </div>
</div>

谁知道我怎样才能得到那个<h1>不滚动页面？

Answer 1

加左:50%；前10名％;转换:翻译(-50%，-50%)；到 h 标签。当它处于 padding:fixed 时，您可以通过 top、left、bottom、right 属性分配其固定位置，然后使用 translate 使其正确居中。

#grid
{
    z-index:5;
    position:relative;
    width:100%;
    height:100%;
    
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:minmax(auto);
    grid-gap: 0px;
    grid-template-areas:
        "imgh imgh imgh imgh"
        "cont cont cont cont";
}

#imgh
{
    grid-area: imgh;
    background-image: url("https://www.web-designindia.com/images/header-form-banner.jpg");
    background-size: 100%;
    background-position: bottom;
    background-attachment: fixed;
    height:20vw;
    opacity: .9;
}

#imgh h1
{
    color:white;
    text-shadow: 4px 4px 8px #000;
    font-size: 5vw;
    font-family: "Bodoni MT";
    text-align: center;
    position:fixed;
    left:50%;
    top:20%;
    transform: translate(-50%, -50%);
}

#cont
{
    grid-area: cont;
    height:90vw;
    background-color:white;
}

<div id="grid">
    <div id="imgh">
        <h1>Header Text</h1>
    </div>
    <div id="cont">
        <p>this is a paragraph</p>
    </div>
</div>