Фоновое изображение перекрывает верхний и нижний колонтитулы, текст не будет располагаться по центру - PullRequest
Новая
       11

Фоновое изображение перекрывает верхний и нижний колонтитулы, текст не будет располагаться по центру

0 голосов
/ 29 октября 2019

Итак, я хочу, чтобы изображение покрывало весь экран, пока вы не начнете прокручиваться вниз. (Это изображение также является слайд-шоу с анимацией затухания). В центре этого изображения должен быть текст. Заголовок должен перекрывать изображение, а нижний колонтитул должен быть под ним. (Я добавлю больше контента между нижним колонтитулом и изображением позже)

Однако в настоящее время он не работает должным образом. И верхний и нижний колонтитулы перекрываются фоновым изображением. Текст центрируется прямо там, где верхний и нижний колонтитулы соединяются вместе, а не в середине фонового изображения. Мне нужна помощь с этим. Обратитесь к изображению и коду ниже. Вы также можете просмотреть страницу на https://www.mh -rp.com .

изображение с примечаниями и уточнениями 

    <body style="background-color:#111111">
        <header>
            <div class="header">
                <div class="inner_header">
                    <div class="logo_container">
                        <img src="/images/weblogo.png" alt="MHRP">
                    </div>

                    <ul class="navigation">
                        <a href="https://www.mh-rp.com/"><li><i class="fa fa-home"></i> Home</li></a>
                        <a href="https://www.forum.mh-rp.com/pages/About_Us/"><li><i class="fa fa-address-card"></i> About</li></a>
                        <a href="https://www.forum.mh-rp.com/"><li><i class="fa fa-comments"></i> Forum</li></a>
                        <a href="https://www.ucp.mh-rp.com/"><li><i class="fa fa-sign-in"></i> UCP</li></a>
                        <a href="https://www.mh-rp.com/discord"><li><i class="fab fa-discord"></i> Discord</li></a>
                    </ul>
                    <div class="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i></div>
                </div>
            </div>
        </header>
        <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('.menu-toggle').click(function(){
                    $('.navigation').toggleClass('active')
                })
            })
        </script>
        <main>
            <div class="image_container">
                <div id="background-preload" class="background-start"></div>
                <script>$('#background-preload').delay(5000).fadeOut('slow');</script>

                <ul class="cb-slideshow">
                    <li><span></span></li>
                    <li><span></span></li>
                    <li><span></span></li>
                    <li><span></span></li>
                    <li><span></span></li>
                    <li><span></span></li>
                </ul>
                <div class="maintext">Mulholland Roleplay
                    <div><img class="ipimage" src="/images/sa-mp.png"></div>
                    <div><span class="mainip">57.80.79.165:1050</span></div>
                    <div><a class="mainbutton" href="https://www.forum.mh-rp.com/wiki/game-server/">Play Now</a></div>
                </div>
            </div>
        </main>

        <footer>
            <div class="footer">
                <div class="inner_footer">
                    <div class="logo_container2">
                        <img src="/images/logo.png" alt="MHRP">

                        <div>
                            <a href="//www.dmca.com/Protection/Status.aspx?ID=6c4220d8-268c-4e0c-897f-3ba9a38e002d" title="DMCA.com Protection Status" class="dmca-badge"> <img src ="https://images.dmca.com/Badges/dmca_protected_sml_120l.png?ID=6c4220d8-268c-4e0c-897f-3ba9a38e002d"  alt="DMCA.com Protection Status" /></a>  <script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js"> </script>
                        </div>
                </div>

                <div class="footer_third">
                    <h1>Need Help?</h1>
                    <a href="https://www.forum.mh-rp.com/misc/contact/">Contact Us</a>
                    <a href="https://www.forum.mh-rp.com/help/cookies/">Cookie Usage</a>
                    <a href="https://www.forum.mh-rp.com/help/terms/">Terms &amp; Conditions</a>
                    <a href="https://www.forum.mh-rp.com/help/privacy-policy/">Privacy Policy</a>
                </div>

                <div class="footer_third">
                    <h1>More</h1>
                    <a href="https://www.forum.mh-rp.com/wiki">Encyclopedia</a>
                    <a href="https://www.forum.mh-rp.com/shop/">Credit Store</a>
                    <a href="https://www.rockstargames.com/">Rockstar Games</a>
                    <a href="https://www.sa-mp.com/">San Andreas Multiplayer</a>
                </div>

                <div class="footer_third">
                    <h1>Follow Us</h1>
                    <li><a href="https://www.instagram.com/mulhollandroleplay/"><i class="fa fa-instagram"></i> Instagram</a></li>
                    <li><a href="https://twitter.com/mulholland_rp"><i class="fa fa-twitter"></i> Twitter</a></li>
                    <li><a href="https://www.youtube.com/channel/UCZ1RdxUtDJubpWc6y4GOdZg?view_as=subscriber"><i class="fa fa-youtube"></i> YouTube</a></li>
                </div>

                <br/>

                <div class="footer_third">

                    <p style="color:white; text-align:center; font-size:16px;"><br/><br/>Copyright © 2019 mh-rp.com
                        <br/>
                        The mh-rp game server is powered by sa-mp.com. sa-mp.com is powered by Grand Theft Auto: San Andreas.
                        <br/>
                        mh-rp.com and the contents herein, are not affiliated with Rockstar Games, Rockstar North, Take-Two Interactive Software Inc or sa-mp.com.
                        <br/>
                        Grand Theft Auto and Grand Theft Auto: San Andreas are registered trademarks of Take-Two Interactive Software Inc.</p>
                </div>

            </div>
        </footer>
        <script src="/js/cookieconsent.min.js" data-cfasync="false"></script>
        <script>
        window.cookieconsent.initialise({
          "palette": {
            "popup": {
              "background": "#3a3a3a",
              "text": "#a0a09e"
            },
            "button": {
              "background": "#185886"
            }
          },
          "content": {
            "message": "This site uses cookies to help personalise content, tailor your experience, advertise and to keep you logged in if you register.\nBy continuing to use this site, you are consenting to our use of cookies.",
            "dismiss": "Accept",
            "link": "Learn more..."
          },
          "position": "bottom-left"
        });
        </script>
    </body>

@import url('https://fonts.googleapis.com/css?family=Staatliches&display=swap');

*
{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

/* start of not found */

.logo_container3
{
    text-align: center;
}

.headertext
{
    color: white;
    display: block;
    text-align: center;
    width: 100%;
    padding-top: 20px;
}

.buttontext
{
    color: white;
    font-family: "Verdana";
    padding: 0px 20px;
}

.buttontext:hover
{
    color:white; background:#292929;
    -o-transition:color .2s ease-out, background 0.5s ease-in;
    -ms-transition:color .2s ease-out, background 0.5s ease-in;
    -moz-transition:color .2s ease-out, background 0.5s ease-in;
    -webkit-transition:color .2s ease-out, background 0.5s ease-in;
    /* ...and now override with proper CSS property */
    transition:color .2s ease-out, background 0.5s ease-in;

    background-color: #185886;
}

/* end of not found */

/* start of header */

.header
{
    width: 100%;
    height: 80px;
    display: block;
    background-color: #292929;
}

.inner_header
{
    width: 1000px;
    height: 100%;
    display: block;
    margin: 0 auto;
    background-color: #292929;
}

.logo_container
{
    height: 100%;
    display: table;
    float: left;
}

.logo_container img
{
    display: table-cell;
    vertical-align: middle;
    padding-top: 5%;
    height:60px
}

.navigation
{
    float: right;
    height: 100%;
}

.navigation a
{
    height: 100%;
    display: table;
    float: left;
    padding: 0px 20px;

}

.navigation a li
{
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    color: white;
    font-family: "Verdana";
    font-size: 16px;
}

.navigation a:first-child
{
    background-color: #185886;
}

.navigation a:hover
{
    color:white; background:#292929;
    -o-transition:color .2s ease-out, background 0.5s ease-in;
    -ms-transition:color .2s ease-out, background 0.5s ease-in;
    -moz-transition:color .2s ease-out, background 0.5s ease-in;
    -webkit-transition:color .2s ease-out, background 0.5s ease-in;
    /* ...and now override with proper CSS property */
    transition:color .2s ease-out, background 0.5s ease-in;

    background-color: #185886;
}

/* mobile */
.menu-toggle
{
    color: white;
    float:right;
    line-height: 77px;
    font-size: 48px;
    cursor: pointer;
    display: none;
}

@media (max-width: 1000px)
{
    .menu-toggle
    {
        display: block;
    }
    .navigation
    {
        position: absolute;
        width: 100%;
        height: calc(100vh -50px);
        background: #333;
        top: 80px;
        left: -100%;
        transition: 0.5s;
        display: grid;
    }
    .navigation.active
    {
        left: 0;
    }
    .navigation ul
    {
        display: block;
        text-align: center;

    }
    .navigation ul li a
    {
        border-bottom: 1px solid rgba(0,0,0,.2);
    }
    .inner_header
    {
        width: 90%;
    }
}

/* end of header */

/* start of footer */

.footer
{
    width: 100vw;
    display: block;
    overflow: hidden;
    padding: 70px 0;
    box-sizing: border-box;
    background-color: #18181a;
}

.inner_footer
{
    display: block;
    margin: 0 auto;
    width: 1100px;
    height: 100%;
}

.inner_footer .logo_container2
{
    width:35%;
    float: left;
    height: 100%;
    display: block;
}

.inner_footer .logo_container2 img
{
    width: 100px;
    height: auto;
}

.inner_footer .footer_third
{
    width: calc(21.6666666667% -20px);
    margin-right: 10px;
    float: left;
    height: 100%;
}

.inner_footer .footer_third:last-child
{
    margin-right: 0;
}

.inner_footer .footer_third h1
{
    font-family: 'arial';
    font-size: 22px;
    color: white;
    display: block;
    width: 100%;
    margin-bottom: 20px;
}

.inner_footer .footer_third a
{
    font-family: "Arial";
    font-size: 18px;
    color: white;
    display: block;
    font-weight: 200;
    width: 100%;
}

.inner_footer .footer_third a:hover
{
    color:white; background:#292929;
    -o-transition:color .2s ease-out, background 0.5s ease-in;
    -ms-transition:color .2s ease-out, background 0.5s ease-in;
    -moz-transition:color .2s ease-out, background 0.5s ease-in;
    -webkit-transition:color .2s ease-out, background 0.5s ease-in;
    /* ...and now override with proper CSS property */
    transition:color .2s ease-out, background 0.5s ease-in;

    background-color: #185886;
}

/* mobile */
@media(max-width: 1000px)
{
    .footer .inner_footer
    {
        width: 90%;
    }

    .inner_footer .logo_Container2,
    .inner_footer .footer_third
    {
        width: 100%;
        margin-bottom: 30px;
    }
}

/* end of footer */

/* start of main */

body
{
    overflow-x: hidden;
}

/* this is there to show no fading animation when you load the page for the first time */
.background-start
{
    background-image: url(../images/1.png);
    position: fixed;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
}

.cb-slideshow,
.cb-slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}

.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    background-attachment: fixed;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s; 
}

.cb-slideshow li:nth-child(1) span { 
    background-image: url(../images/1.png);
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(../images/2.png);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(../images/3.png);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url(../images/4.png);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) span { 
    background-image: url(../images/5.png);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) span { 
    background-image: url(../images/6.png);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}

/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
    opacity: 1;
}

@media screen and (max-width: 1140px) { 
    .cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) { 
    .cb-slideshow li div h3 { font-size: 80px }
}

.image_container
{
    position:relative;
}

.maintext
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: "Staatliches", "Arial", sans-serif;
    font-weight:normal;
    font-style:normal;
    font-size: 72px;
}

.mainbutton
{
    position: absolute;
    top: 150%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: "Staatliches", "Arial", sans-serif;
    font-weight:normal;
    font-style:normal;
    font-size: 32px;
    border-style: solid;
    border-width: 1px;
    border-color: white;
    transition: border-width 0.3s;
    padding: 5px 5px 5px 5px;
}

.mainip
{
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: "Staatliches", "Arial", sans-serif;
    font-weight:normal;
    font-style:normal;
    font-size: 32px;
}

.ipimage
{
    position: absolute;
    top: 80%;
    left: 27.5%;
    width: 32px;
}


.mainbutton:hover
{
    border-width: 3px;
}

/* end of main */

1 Ответ

0 голосов
/ 29 октября 2019

Добавьте эти два селектора. 

.image-container { height: 100vh }
header, footer { position: relative; z-index: 1 }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...