Question

我知道有人问过类似的问题，但我无法弄清楚代码中的错误所在。

我有一个固定的背景图像，希望文本在其上滚动。如果我在主要部分之后包括一个部分，则文本会溢出到下一部分，而不是在下一部分开始之前完全滚动。如果我隐藏下一部分，则该文本根本不会滚动，并且超出屏幕显示范围的任何文本都将无法查看。我以前创建了一个ClickFunnels网站，从本质上来说，我想从该网站复制顶部。（这是CF网站：www.seeksavorstyle.815south.com）非常感谢您的帮助！

这是我正在使用的模板中的当前代码：

HTML

    <?php if( get_theme_mod( 'active_hero' ) == '') : ?>

        <section id="hero-header" data-speed="8" data-type="background" style="background: url('<?php echo esc_url( get_theme_mod( 'sensiblewp_main_bg', ( get_stylesheet_directory_uri( 'stylesheet_directory') . '/img/hero-1.jpg'))); ?>')  50% 0 no-repeat fixed;"> 
            <div class="hero-content-container">
                <div class="hero-content">

                        <span>

                        <?php if ( get_theme_mod( 'sensiblewp_first_heading' ) ) : ?>

                            <h1 class="animated fadeInDown delay">
                                <?php echo esc_textarea( get_theme_mod( 'sensiblewp_first_heading')) ?>
                            </h1> 

                            <h2 class="animated fadeInDown delay">IS GETTING A MAKEOVER</h2> 

                        <?php endif; ?> 



                        <?php if ( get_theme_mod( 'sensiblewp_hero_button_text' ) ) : ?>

                            <?php if ( get_theme_mod( 'hero_button_url' ) ) : ?>

                                <a href="<?php echo esc_url( get_page_link( get_theme_mod('hero_button_url'))) ?>" class="featured-link"> 

                            <?php endif; ?>

                            <?php if ( get_theme_mod( 'page_url_text' ) ) : ?> 

                                <a href="<?php echo esc_url( get_theme_mod ( 'page_url_text' )) ?>" class="featured-link" target="_blank">

                            <?php endif; ?> 

                                    <button class="wow animated fadeInDown delay">
                                        <?php echo esc_html( get_theme_mod( 'sensiblewp_hero_button_text')) ?>
                                    </button>

                                </a>
                                <br><br>
                           <h3>We'll be celebrating the relaunch with a free 14-day challenge, plus new services and courses for 2019!  In the meantime, follow over on Instagram @SeekSavorStyle where we'll still be sharing free content and dropping announcements on the new releases.</h3>
                        <?php endif; ?> 


                        </span>

            </div><!-- hero-content --> 
        </div><!-- hero-content-container -->
    </section><!-- hero-header -->


<?php endif; ?>

CSS：

.hero-content-container {
position: absolute;
height: 100%;
width: 100%;
} 
.hero-content {
display: table;
position: relative;
height: 100%;
max-width: 65%;
margin: 0 auto;
text-align: center;
}
.hero-content span {
display: table-cell; 
vertical-align: middle;
}
.hero-content span h1 {
font-weight: 400px;
font-size: 62px;
line-height: 64px;
color: #fff;
margin-bottom: 40px;
padding-top: 30px;
padding-bottom: 30px;

文字无法在背景图片上滚动

0 个答案: