Question

点击按钮时，我在新背景图片中遇到问题。此外，背景图像一旦被点击就不会覆盖页面。不确定我的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>こでど</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');
});

Answer 1

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

单击时淡入不同的背景图像

1 个答案: