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

Question

我想将背景图片应用于社交媒体图标。我理解如何将图像应用为背景，但我被卡住的地方与透明度设置有关的伪元素有关。这是我的代码:

#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"); 

我尝试了各种方法，但我似乎覆盖了透明度设置。

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

Answer 1

由于 background-color

，你的透明度被破坏了

查看 JSFiddle 以了解。我不确定您想实现什么，但如果您停止使用该属性，您将恢复透明度。

https://jsfiddle.net/ze71zuej/