НЕ МОЖЕТ ПОЛУЧИТЬ изображение перед фоном

Charlotte Evans спросил: 12 мая 2018 в 05:08 в: html

Я пытаюсь получить изображение, появившееся перед фоном в нижнем колонтитуле, используя положение: абсолютное с z-index: 1, но оно продолжает подниматься. Я также пробовал позицию: относительные и более высокие значения для z-индекса, но ничего не работает. Проблема не в том, что логотип слишком смущен тем, что я сделал.

Что я делаю неправильно? Код ниже: (Я немного newb, поэтому мой код, скорее всего, не большой ...)

/*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;
      }
    }

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

1 ответ

DonCarlosII ответил: 12 мая 2018 в 05:39

Ваше изображение является прозрачным png. Он показывает черный фон через полый участок изображения. Вы можете исправить это, добавив следующее:

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

Здесь вы можете проверить его.