html - 无法让图像出现在背景前面

Question

我一直在尝试通过使用 position: absolute 和 z-index: 1 使图像出现在页脚背景的前面，但它一直落后。我也尝试过 position: relative 和更高的 z-index 值，但似乎没有任何效果。这个问题并没有发生在 Logo 上，所以我对我所做的事情非常困惑。

我做错了什么？代码如下:(我有点新手，所以我的代码很可能不是很好......)

CSS

/*Footer*/

 .footer-end  {
    width: 100%;
    background-color: #000000;
    padding-top: 20px;
    height: 300px;
   position: absolute;
   z-index: 0

   }


.logo-hashtag {
    float: left; 
   padding-left: 0;
}

.logo-hashtag img {
    padding-left: 0;
}


.sitemap {
 clear: both;
}


.footer-links {
  width: 33%;
    padding: 20px 10px 10px 10px;
  height: auto;
  text-align:center;
  float: left;
} 

.footer-box-1 {
 width: 60%;
    height: auto;
  float: left;

  text-align: center;
  color: #f6f4f4;
}

.footer-box-2 {
    width: 40%;
    height: auto;
  float: left;

  text-align: center;
  color: #f6f4f4;
}

.footer-box-1 h2 { 
    color: #f6f4f4;
    padding-left: 50px;
}
  .footer-box-1 h3 { 
    color: #f6f4f4;
    font-weight: 400;
    font-family: 'Freight', serif;
    font-size: 16px;
    text-decoration: underline;
    padding-bottom: 5px;
  }

 .footer-box-2 h3 { 
    color: #f6f4f4;
    font-weight: 400;
    font-family: 'Freight', serif;
    font-size: 16px;
    text-decoration: underline;
    padding-bottom: 5px;
  }

.footer-links li a:link {
  color: #f6f4f4;
}

  .footer-links li a {
  color: #f6f4f4;
    font-family: 'Freight', serif;
}

.footer-links ul {
    list-style-type: none;
    width: 28%;
   list-style-type: none;
  display: inline;

 }

.footer-social {
    padding-top: 20px;
}

.footer-social ul {
    list-style-type: none;

}

.footer-social ul li {
    display: inline-block;
    padding: 3% 7%;
    margin: auto;
    }

.footer-signature p {
    font-size: 15px;
    text-align: center;
}

.footer-signature img {
    float: right;
    position: absolute;
    z-index: 1;
}

@media screen and (max-width: 800px) {
    .footer-box {
        width: 100%;
       padding: 5px;
      font-size: 14px;
    }
}

  @media screen and (max-width: 800px) {
    .footer-end {
        height: 575px;


    }
}

    @media screen and (max-width: 800px){ 
      .footer-links li a {
         font-size: 16px;
      }
    }

HTML

<div class="footer-end">




     <div class="footer-content">
        <div class="footer-box-1">
          <div class="logo-hashtag">
            <img src="https://cdn.shopify.com/s/files/1/0020/1326/5973/files/logo-reverse.png?14962024690388478358" width="200px">
            <h2>#INADIAMONDSOCIETY</h2>
               </div>

          <div class="sitemap">

          <div class="footer-links">
             <h3> About </h3>
    <ul>
        <li> <a href=“https://www.velaire.com/designer-policy”>Designer Policy</a></li>
    <li> <a href=“https://www.velaire.com/editoral-policy”>Editorial Policy</a></li>
    <li> <a href=“https://www.velaire.com/advertising”>Advertising</a></li>
       <li> <a href=“https://www.velaire.com/affiliates”>Affiliates</a></li>
    <li> <a href=“https://www.velaire.com/personal-shopping”>Personal Shopping</a></li>
        </ul>

           </div>


           <div class="footer-links">
              <h3>Shopping</h3>
              <ul>
        <li> <a href=“https://www.velaire.com/new-in”>New In</a></li>
        <li> <a href=“https://www.velaire.com/trunks-shows”>Trunk Shows</a></li>
        <li> <a href=“https://www.velaire.com/bridal”>Bridal</a></li>
        <li> <a href=“https://www.velaire.com/exclusive”>Exclusive</a></li>
        <li> <a href=“https://www.velaire.com/diamonds”>Diamonds</a></li>
    </ul>
            </div>

           <div class="footer-links">
              <h3>Customer Care</h3>
              <ul>
        <li> <a href=“https://www.velaire.com/delivery”>Delivery</a></li>
        <li> <a href=“https://www.velaire.com/terms-and-conditions”>Terms & Conditions</a></li>
        <li> <a href=“https://www.velaire.com/returns”>Returns</a></li>
        <li> <a href=“https://www.velaire.com/payments”>Payments</a></li>
        <li> <a href=“https://www.velaire.com/faqs”>FAQS</a></li>
        <li> <a href=“https://www.velaire.com/Sizing”>Sizing</a></li>
    </ul>
           </div>



          </div>
       </div>

           <!-- Begin MailChimp Signup Form -->
        <div class="footer-box-2">

      <div id="mc_embed_signup">
        <form action="https://velaire.us18.list-manage.com/subscribe/post?u=47b7d519eda9df1f60fd2059b&id=96e989992a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
            <div id="mc_embed_signup_scroll">
              <h3>
              Join the Diamond Society </h3>


        <div class="mc-field-group">
          <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="   Email Address">
              </div>
          <div id="mce-responses" class="clear">
            <div class="response" id="mce-error-response" style="display:none"></div>
            <div class="response" id="mce-success-response" style="display:none"></div>
          </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_47b7d519eda9df1f60fd2059b_96e989992a" tabindex="-1" value=""></div>
            <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
            </div>
        </form>
        </div>
          <div class="footer-social">
          <ul>
            <li> <a href="https://www.instagram.com/velaire_archives">
              <img src="https://cdn.shopify.com/s/files/1/0020/1326/5973/files/instagram.png?126339389881359087" width="30px"></a></li>
            <li> <a href="https://www.instagram.com/velaire_archives">
              <img src="https://cdn.shopify.com/s/files/1/0020/1326/5973/files/facebook-symbol_318-37686.jpg?126339389881359087" width="30px"></a></li>
            <li> <a href="https://www.instagram.com/velaire_archives">
              <img src="https://cdn.shopify.com/s/files/1/0020/1326/5973/files/pinterest-logo-circle_318-40721.png?5179200079451088375" width="30px"></a></li>
            </ul>

               </div>  
          <div class="footer-signature">
            <p>Fine Jewellery Refined <img src="https://cdn.shopify.com/s/files/1/0020/1326/5973/files/signature.png?7364090345579971520" width="40%"></p>

          </div>
      </div>

  </div>
</div>

Answer 1

您的图像是透明的 png。它通过图像的空心部分显示黑色背景。您可以通过添加以下内容来修复它:

.footer-signature img {
    float: right;
    position: absolute;
    z-index: 1;
    background: white;
}

可以查一下here .