如何在css中處理影像的alpha層？

我試圖制作一個影像按鈕。影像中有 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>

這就是它的外觀。我希望白色邊框透明并顯示底層背景顏色。

uj5u.com熱心網友回復：

你把圖片放在里面<button>！<<這是問題

a 的默認行為<button>是灰色。

只需向css 屬性添加一個inherit值background-color

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

標籤：html css 图片 按钮 α

上一篇：當我進入移動視圖時不需要的空白區域

下一篇：在Flutter中，如何使我的FadeInImage適合具有圓邊的父容器？