verhindern, dass linearer Farbverlauf auf Bild überläuft

Question

ich versuche, this Seite im Moment neu zu erstellen, gerade jetzt sieht es gut aus, aber wenn ich versuche, das iphone Bild hinzuzufügen, wird die Seite this der lineare Gradient, den ich auf das Hintergrundbild setze Überlauf auf der Unterseite und drückte den Knopf weg. Gibt es eine Möglichkeit, dies zu beheben, so dass der lineare Verlauf nur das Hintergrundbild abdeckt? danke

#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

Der einfachste Weg ist wahrscheinlich, das Telefon außerhalb des Containers zu bluten. Sie können dies tun, indem Sie es auf position: absolute; setzen.

#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>

Answer 2

Sie, dass für es, das enthält position: absolute; und die notwendigen top, left, width und height Werte eine Klasse oder ID und erstellen Sie eine CSS-Regel geben könnte (sich nach Bedarf anpassen) .

Auch der Container des Bildes sollte position: relative; dafür funktionieren.

Dies wird das Bild über die anderen Elemente in Bezug auf seinen Container positionieren.