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

我想申请一个背景图片，社交媒体图标。我没有说明如何将图像作为背景应用，但是我陷入困境的原因与涉及透明度设置的伪元素有关。这里是我的代码：如何使用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");

我已经试过各种方法，但我似乎是压倒一切的透明度设置。

有没有人有任何想法可以解决这个问题？

来源

2017-03-06 Craig

这不是真的清楚你想从你的代码要实现什么视力预后。你可以包括一些截图，也许是一个工作的例子？ – Terry

你可以发布你的HTML，也许是一个演示？ – sol

你透明度因为background-color

打破见的jsfiddle理解。我不确定你想达到什么目的，但是如果你停止使用这个属性，你会得到你的透明度。

https://jsfiddle.net/ze71zuej/

来源

2017-03-06 18:08:06 amflare

感谢您的评论。在这里发布之前，我尝试了您的建议，但尽管可能适用于颜色，但一旦应用背景，它就会覆盖透明度设置。 – Craig

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

回答

相关问题