我一直在尝试通过使用 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>
最佳答案
您的图像是透明的 png。它通过图像的空心部分显示黑色背景。您可以通过添加以下内容来修复它:
.footer-signature img {
float: right;
position: absolute;
z-index: 1;
background: white;
}
可以查一下here .
关于html - 无法让图像出现在背景前面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50707033/