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/

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

1 个答案: