0

单击按钮时，我在淡入新背景图像时遇到了一些问题。此外，单击后背景图像不会覆盖页面。不确定我的 htmt/css 是否相关。任何帮助表示赞赏！

html：

   <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>こでど&lt;/p>
            </section>

 <section class="one-third column m-lorem">
        <p>こでど </p>
 </section>

        <section class="one-third column m-lorem">
        <p>こでど&lt;/p>
 </section>

 <section class="sixteen columns m-last-para">
    <p>こでど&lt;/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');
});
4

1 回答 1

0

确保该类banner应用于 html 的 body 标签，而不是最顶层的父 div

于 2014-03-27T17:26:39.613 回答