如何处理 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 中图像的 alpha 层？

Question

我试图制作一个图像按钮。图像中有 alpha 层。 Alpha 层没有正确混合，而不是透明度，我得到的是白色背景。

我不知道如何解决这个问题。 请帮忙。 我希望图像按钮显示它们下方的图层颜色而不是白色。

 .footer-icon-list { display: flex; background-color: #0f1720; padding-top: 10px; padding-bottom: 10px; text-align: center; justify-content: space-evenly; }.Facebook-buttom{ margin: auto; border: none; background-image: url("https://raw.githubusercontent.com/AayushPokharel/ContentDeliveryRepo/master/facebook.png"); background-size: 40px; height: 40px; width: 40px; }.Instagram-buttom{ margin: auto; border: none; background-image: url("https://raw.githubusercontent.com/AayushPokharel/ContentDeliveryRepo/master/instagram.png"); background-size: 40px; height: 40px; width: 40px; }.Twitter-buttom{ margin: auto; border: none; background-image: url("https://raw.githubusercontent.com/AayushPokharel/ContentDeliveryRepo/master/twitter.png"); background-size: 40px; height: 40px; width: 40px; }.Github-buttom{ margin: auto; border: none; background-image: url("https://raw.githubusercontent.com/AayushPokharel/ContentDeliveryRepo/master/github.png"); background-size: 40px; height: 40px; width: 40px; }

 <div className="footer-icon-list"> <span><button className="Facebook-buttom"></button></span> <span><button className="Instagram-buttom"></button></span> <span><button className="Twitter-buttom"></button></span> <span><button className="Github-buttom"></button></span> </div>

这就是它的外观。 我希望白色边框透明并显示底层背景颜色。

Answer 1

您将图像放入<button> ！ <<这是问题

<button>的默认行为是灰色的。

只需将inherit值添加到background-color ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 属性

https://developer.mozilla.org/en-US/docs/Web/CSS/inherit

background-color: inherit;

我还重构了你的代码，因为它有很多重复的代码，
图片很好，它们是.png ，所以很好

 .footer-icon-list { --height: 40px; /* this is your background of the parent I suggest you to change it (grey on black don't have a good contrast) */ background-color: #0f1720; /* this shortcut set the bottom and top with the 10px */ padding: 10px 0; /* centering */ display: flex; text-align: center; justify-content: space-evenly; }.footer-icon-list span button { margin: auto; border: none; background-size: 40px; height: 40px; width: 40px; /* the solution */ background-color: inherit; } /* images */.Facebook-buttom { background-image: url("https://raw.githubusercontent.com/AayushPokharel/ContentDeliveryRepo/master/facebook.png"); }.Instagram-buttom { background-image: url("https://raw.githubusercontent.com/AayushPokharel/ContentDeliveryRepo/master/instagram.png"); }.Twitter-buttom { background-image: url("https://raw.githubusercontent.com/AayushPokharel/ContentDeliveryRepo/master/twitter.png"); }.Github-buttom { background-image: url("https://raw.githubusercontent.com/AayushPokharel/ContentDeliveryRepo/master/github.png"); }

 <div class="footer-icon-list"> < -- 1 --> <span><button class="Facebook-buttom"></button></span> < -- 2 --> <span><button class="Instagram-buttom"></button></span> < -- 3 --> <span><button class="Twitter-buttom"></button></span> < -- 4 --> <span><button class="Github-buttom"></button></span> </div>