html - 防止图像上的线性渐变溢出

Question

我正在尝试重新创建 this当前页面，现在看起来不错，但是当我尝试添加 iphone 图片时，页面变得像 this我放在背景图像上的线性渐变溢出到底部，然后将按钮推开。有没有办法解决这个问题，使线性渐变只覆盖背景图像？谢谢你

#body {
    background: url(assets/bg_home.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 70%;
    background-position: top center;
    display: block;
    position: relative;
}

#body::before {
    content: "";
    background-image: linear-gradient(#1659e0, #489AEA);
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
}

<div id="body">
    <nav>
        <!--navbar here-->
    </nav>

    <div class="container">
        <div class="row">
            <div class="col-md-8 content">
                <h1>Meet BestApp</h1>
                <h1>The new world for chat</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis deleniti cumque, odit atque molestiae totam facere aliquam sed cum perspiciatis quam, at sequi, corporis distinctio. Fugit nam, nesciunt quaerat pariatur.</p>
            </div>
            <div class="col-md-4 image">
                <img src="assets/phone.jpg" alt="phone ">
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <button class="button"> LEARN MORE</button>
            <button class="button"><i class="fa fa-cloud-download" aria-hidden="true"></i> DOWNLOAD APP</button>
        </div>
    </div>
</div>

Answer 1

最简单的方法可能是让手机在其所在的容器外流血。您可以通过将其设置为 position: absolute; 来做到这一点。

#body {
    background: url(assets/bg_home.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 70%;
    background-position: top center;
    display: block;
    position: relative;
}

#body::before {
    content: "";
    background-image: linear-gradient(#1659e0, #489AEA);
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
}

.image img {
  position:absolute;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div id="body">
    <nav>
      navigation
    </nav>

    <div class="container">
        <div class="row">
            <div class="col-md-8 content">
                <h1>Meet BestApp</h1>
                <h1>The new world for chat</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis deleniti cumque, odit atque molestiae totam facere aliquam sed cum perspiciatis quam, at sequi, corporis distinctio. Fugit nam, nesciunt quaerat pariatur.</p>
            </div>
            <div class="col-md-4 image">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/IPhone_7_Jet_Black.svg/150px-IPhone_7_Jet_Black.svg.png" alt="phone ">
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <button class="button"> LEARN MORE</button>
            <button class="button"><i class="fa fa-cloud-download" aria-hidden="true"></i> DOWNLOAD APP</button>
        </div>
    </div>
</div>