如何使用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將圖像應用於特定的邊框？

回答

相關問題