Html 如何使用CSS将图像应用于特定边框？

我想将背景图像应用到社交媒体图标。我不明白如何将图像应用为背景，但我遇到的问题是，透明度设置涉及到一个伪元素。这是我的密码：

#facebook-icon{
    background-color: #7d4826;
    color: #ffffff;
    padding-top: 23px;
    padding-left: 10px;
    padding-right: 26px;
    margin-right: 5px;  
    background-image: url("https://www.example.com/wood.png");
}

#facebook-icon::after{
    content: "";
    position: absolute;
    padding-top: 10px;
    border-bottom: 18px solid transparent;
    border-left: 18px solid #7d4826;
    border-right: 18px solid #7d4826;
    margin-left: -10px;

我需要在伪元素中插入以下代码：

background-color: #7d4826;
background-image: url("https://www.example.com/wood.png"); 

我尝试过各种方法，但我似乎正在覆盖透明度设置

---

有人知道我该如何解决这个问题吗？

由于背景色的原因，您的透明度正在下降

请参阅JSFIDLE以了解。我不确定你想要实现什么，但是如果你停止使用这个属性，你就会恢复透明度

---

目前还不清楚您试图从代码中获得什么视觉效果。你能提供一些截图，或者一个工作示例吗？你能发布你的HTML，或者一个演示吗？谢谢你的评论。在这里发布之前，我尝试过你的建议，但尽管它可能适用于颜色，但只要我应用背景，它就会覆盖透明度设置。