CSS中的背景圖片並為其賦予視差

Question

我有問題。 我正在使用實體化CSS。 我使用html <img class="parallax">標記嘗試了視差，但是有沒有一種方法可以讓您在CSS中獲得背景圖像，也可以使其成為視差。

我的示例代碼：

內容html：

    <div class="row parallax-container">
    <div class="parallax">
        <div class="intro headerBackground">
            <h1 class="grey-text text-lighten-5">Data</h1>
            <h5 class="grey lighten-4 grey-text text-darken-1">Data</h5>
        </div>
    </div>
</div>

內容CSS：

.intro
{
    text-align: center;
    padding-top: 13%;
    padding-bottom: 13%;
    margin-bottom: 50px;
}

.intro h1
{
    font-weight: 900;
    text-transform: uppercase;
}

.intro h5
{
    text-transform: uppercase;
    background-color: #fafafa;
    padding: 10px;
    display: inline-block;
    font-size: 1.2rem;
}
.headerBackground{
    height:800px;
    background-image:url('images');
    background-repeat:no-repeat;
    background-position:center;
    background-size: cover;
}

Answer 1

請試試：-

<div class="row parallax-container">
<div class="parallax headerBackground">
    <div class="intro">
        <h1 class="grey-text text-lighten-5">Data</h1>
        <h5 class="grey lighten-4 grey-text text-darken-1">Data</h5>
    </div>
</div>