Question

我的头部图像触及下一个区块（动作功能）。（影像电话）

我尝试更改位置类型，z-index。如果我裁切了图像，它并不酷并且易于修复;）

我该如何更改图像：div类还是仅img标签？在我的代码中，我只是使用没有div块的类来更改img。干净吗？

       <div class="container">
                   <nav id="main-nav">
                     <ul class="menu">
                       <li><a href="#">Tour</a></li>
                       <li><a href="#">Features</a></li>
                       <li><a href="#">Pricing</a></li>
                       <li>
                       <h2 class="logo">NEWPROVIDENCE</h2>
                       </li>
                       <li><a href="#">Help</a></li>
                       <li><a href="#">Contact</a></li>
                       <a href="#" class="apple"><i class="fab fa-apple fa-1x"></i>Get app</a>
                     </ul>
                   </nav>
       <div class="showcase">
           <h1>What happen tomorrow?</h1>   
           <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, ex maxime! Natus earum praesentium officiis adipisci qui nisi ut, laboriosam labore optio. Non quidem assumenda dolore consectetur, corrupti quae delectus.</p>
           <a href="" class="video"><i class="fas fa-play"></i>Watch Video</a>
       </div>
       <img src="https://imgur.com/a/Ees14KN" class="phone-img" alt="">
   </div>
</header>

<section id="main-features">
       <div class="container">
           <div class="features">
               <div class="feature">
                   <i class="fas fa-clock fa-2x"></i>
                   <h2 class="m-heading">Real time all the time</h2>
                   <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro sunt soluta praesentium earum iusto hic?</p>
               </div>
               <div class="feature">
                   <i class="fas fa-clock fa-2x"></i>
                   <h2 class="m-heading">Real time all the time</h2>
                   <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro sunt soluta praesentium earum iusto hic?</p>
               </div>
           </div>
           <hr>
       </div>
   </section>


header {
    background: url('../img/bg-header.png') no-repeat center center / cover;
    height: 100vh;
}

#main-nav {
    display: flex;
    justify-content: space-between;
    padding: 2rem;
}

#main-nav ul {
    display: grid;
    grid-template-columns: repeat(3, auto) 1fr repeat(3, auto);
    width: 100%;
    list-style: none;
    align-items: center;
    text-align: center;
}

#main-nav ul li a {
    padding: 0.75rem;
    font-size: 16px;
    margin: 0 0.25rem;
    color: #26272d;
}

#main-nav ul li a:hover {
    color: #bebebf;
}

.phone-img {
    display: block;
    margin: 0 auto;
}

Answer 1

您可以尝试将手机图像作为背景图像放置在div内，而不是将其嵌入到页面的html中。

如果您从html中删除图像并添加div class="phone-image"（例如），则可以控制div的高度和宽度并将其添加到css中：

div .phone-image {
      background: url(../path-to-your-images-folder/images/yourphoto.jpg);
      background-size: cover;
      height: 100px; /* for example */
      width: 40%; /* for example 40% of the container width */
 }

您还必须通过使用较高的z索引和position: absolute;将其正确放置在其他图像的顶部，然后再使用上，下，左和右值（https://medium.freecodecamp.org/how-to-understand-css-position-absolute-once-and-for-all-b71ca10cd3fd）

如何隐藏图像的后半部分？

1 个答案: