【问题标题】:Background image in css and giving it parallaxCSS中的背景图像并赋予它视差
【发布时间】:2016-10-03 12:12:13
【问题描述】:

我有疑问。我正在使用物化 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;
}

【问题讨论】:

    标签: html css material-design materialize


    【解决方案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>
    

    【讨论】:

    • 我希望你的问题在你更换代码时能解决:)
    • 不幸的是它没有用。不过感谢您的努力。
    • 请再次更新并检查 .headerBackground{ background-attachment:fixed; }
    猜你喜欢
    • 2015-06-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-01-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多