淡入不同的背景图像时，点击

当按钮被点击时，我在一个新的背景图像中有一些问题。此外，一旦点击，背景图像不会覆盖页面。不确定我的html/css是否相关。任何帮助都是感激的!

   <section class="banner"></section>
<div class="container">
    <header class="sixteen columns l-main-head">
        <h1>シアトル</h1>
    </header>
    <nav class="sixteen columns m-btn-artCont">
        <button class="m-btn-mainArt">学ぶ</button>
    </nav>

    <section class="one-third column m-lorem">
    <p>こでど</p>
            </section>
 <section class="one-third column m-lorem">
        <p>こでど </p>
 </section>
        <section class="one-third column m-lorem">
        <p>こでど</p>
 </section>
 <section class="sixteen columns m-last-para">
    <p>こでど</p>
 </section>
</div><!-- container -->

CSS

.banner { background: url(../images/Seattle.svg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-height: 100%; min-width: 1024px; display: block; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } .m-back-lorem { text-align: center; } .m-btn-artCont { text-align: center; margin-left: 1em; display: block; } button.m-btn-mainArt { background-color: white; border-radius: 49%; color: rgb(2, 0, 0); width: 7em; height: 7em; opacity: 0.5; margin-bottom: 4em; }
jQuery
:
$(document).ready(function() { $('.m-lorem p').hide(); }); $('button.m-btn-mainArt').click(function() { $('.m-lorem p').fadeIn(1000); }); $('button.m-btn-mainArt').click(function() { $('.banner').css('background', 'url(images/Seattle-day.svg) no-repeat center center fixed'); });

确保类banner应用于html的body标签，而不是最上面的父div

相关内容

最新更新

热门标签：