Question

我试图在此页面中为背景图像设置100％的高度，但它似乎无法正常工作。我尝试了很多不同的方法，但似乎没有用。

.signupbackground {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
z-index: 0;
}

代码权限如下所示。我也试过这个：

.signupbackground {
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
z-index: 0;
}

我的身体和html已经拥有100％的身高属性。

body, html {
font-family: "Roboto", sans-serif;
height: 100%;
position: relative;
background: #efefef;
color: black;
overflow-x: hidden;
}

这是html

<body>

<!-- Loader -->
<div class="fh5co-loader"></div>

<div id="fh5co-page">
    <section id="fh5co-header">
        <div class="container">
            <nav role="navigation">
            <h1 id="fh5co-logo"><a href="../index.php"><img id="logo01" src="../img/spredtlogo.png"></a></h1>
                <ul class="pull-right right-menu">
                    <li class="fh5co-cta-btn1"><a href="login.php">Log in</a></li>
                </ul>
            </nav>
        </div>
    </section>

    <section class="no-js-fullheight1" data-next="yes">
    </section>

    <!-- END #fh5co-hero -->
    <div class="signupbackground" style="background-image: url(../img/blur.jpg)">
       <div class="container">

    <div class="memberform">
<div id="msg"></div>
        <h3>Create a new account</h3>
        <h4>Take full advantage of all the new features</h4>

                <input type="text" id="first" placeholder="First Name">
                <input type="text" id="last" placeholder="Last Name">
                <div id="error_1"></div>
                <input type="text" id="email" placeholder="E-mail">
                <div id="error_2"></div>
                <input type="text" id="number" placeholder="Phone number">
                <input type="text" id="uid" placeholder="Username">
                <div id="error_3"></div>
                <input type="password" id="pwd" placeholder="Password">
                <div id="error_4"></div>
                <button class="signup-button" onclick="signup()">Create Account</button>

        <p>By choosing "Create Account" you are accepting to the <a href="termsofuse.php">terms and conditions.</a></p>
    </div>
        </div>
      </div>

<section id="secondary-footer">
    <div class="container">

        <div class="footer-element">
            <ul>
                <li>&copy; 2017 Spredt</li>
                <li><a href="../termsofuse.php">Terms of use</a></li>
                <li><a href="../jobs.php">Careers</a></li>
            </ul>
        </div>

    </div>
</section>
        <!-- END #fh5co-footer -->
    </div>
    <!-- END #fh5co-page -->


    </body>
</html>

但它仍然看起来像这样

我想摆脱那里的丑陋空间。我读到的另一件事是增加父div的高度，我这样做了它使图像更大但空间仍然存在。任何帮助将不胜感激，谢谢！

Answer 1

分裂本身没有可调节高度的事实是导致背景图像变成香蕉的原因。确实，<html>和<body>标签的高度应该是100％，但这还不够，因为图片不遵循这些标签的规则，而是跟随分区。因此，请使用CSS calc()函数。

此外，background-attachment: fixed;不是必需的，但非常需要background-position: center;。

.signupbackground {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     z-index: 0;
     height: calc(100vh - /* header height + footer height in px */); // example: height: calc(100vh - 90px);
}

我的背景图片无法识别身高属性

1 个答案: