代码之家 › 专栏 › 技术社区 › AayushPokharel

如何在css中处理图像的alpha层?

alpha button image css html

AayushPokharel · 技术社区 · 2 年前

我试着做一个图像按钮。图像中有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>

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

1 回复 | 直到 2 年前

Laaouatni Anas 2 年前

你把图像放在 <button> ! <<这就是问题所在

默认行为 <按钮(>); 是灰色的。

只需添加一个 inherit 价值到 background-color css属性

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>