Question

我想用背景img创建一个标题全屏，但我有一个问题

<header>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1 class="logo"><a href="#">Super Tramp</a></h1>
                <h2 class="title">Sketch your next vacation route today</h2>
                <h3 class="sub-title">The Best Landing Page Travel Website for your vacation.</h3>
            </div>
            <div class="col-md-4 col-md-offset-4 col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3">
                <form>
                    <p class="info">
                        Enter the required data and <br>
                        continue to choose the route.
                    </p>
                    <div class="form-group">
                        <input type="text" class="form-control" id="text" placeholder="Full Name">
                    </div>
                    <div class="form-group">
                        <input type="email" class="form-control" id="text" placeholder="Email Adress">
                     </div>
                     <div class="form-group">
                        <input type="text" class="form-control" id="text" placeholder="Phone Number">
                     </div>
                     <button type="button" class="btn btn-primary submit">Request Vacation</button>
                </form>
            </div>
        </div>
    </div>
</header>

这是HTML标记

header {
height: 100vh;
background: linear-gradient(
    rgba(0, 0, 0, 0.25),
    rgba(0, 0, 0, 0.25)
),url("../image/bg-header.jpg");
background-size: cover;
margin-bottom: 35px;

h1 {
    margin-top: 68px !important;
    text-align: center;

    a {
        color: #fff;
        font-family: 'montserrat-semibold';
        border: 3px solid #fff;
        padding: 11px 16px;
        letter-spacing: 8px;
        text-transform: uppercase;

        &:hover {
            text-decoration: none;
            color: #fff;
        }

        &:active {
            text-decoration: none;
            color: #fff;
        }
    }
}

h2 {
    text-align: center;
    color: #fff;
    font-family: 'montserrat-regular';
    letter-spacing: 5px;
    margin-top: 40px;
    font-size: 2.8em;
}

h3 {
    text-align: center;
    color: #fff;
    font-family: 'montserrat-regular';
    letter-spacing: 5px;
    margin-top: 26px;
    margin-bottom: 26px;
    font-size: 1.56em;
}

form {
    background-color: #fff;
    padding: 50px 15px;
    border-radius: 6px;
    padding-bottom: 25px;
    overflow: hidden;
}

div.form-group input, .form-control {
    height: 69px;
    margin-bottom: 25px;
    border: 1px solid #626262;
}

}

这是CSS Markup

但是问题是标题的一部分出来并且不知道我怎么能解决问题

[http://gyazo.com/ef00bdc833ac1e1d26cd8423a132ecc2][1]

[1]：http://gyazo.com/ef00bdc833ac1e1d26cd8423a132ecc2这里是一个有问题的图像。

Answer 1

试试这个，

html： - （已分配ID）

<header id="thisHeader">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1 class="logo"><a href="#">Super Tramp</a></h1>
                <h2 class="title">Sketch your next vacation route today</h2>
                <h3 class="sub-title">The Best Landing Page Travel Website for your vacation.</h3>
            </div>
            <div class="col-md-4 col-md-offset-4 col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3">
                <form>
                    <p class="info">
                        Enter the required data and <br>
                        continue to choose the route.
                    </p>
                    <div class="form-group">
                        <input type="text" class="form-control" id="text" placeholder="Full Name">
                    </div>
                    <div class="form-group">
                        <input type="email" class="form-control" id="text" placeholder="Email Adress">
                     </div>
                     <div class="form-group">
                        <input type="text" class="form-control" id="text" placeholder="Phone Number">
                     </div>
                     <button type="button" class="btn btn-primary submit">Request Vacation</button>
                </form>
            </div>
        </div>
    </div>
</header>

CSS（无变化）

添加一些jQuery： -

$(document).reday(function(){
var clientHeight = $( window ).height();
  $('#thisHeader').css('height', clientHeight);

});

如何制作标题全屏背景？

1 个答案: