2013-02-15 479 views
0

是否可以僅使用CSS更改圖像的顏色?使用css更改圖像的顏色?

(我使用的是透明背景執行glyphicons,我需要不同的符號[不包括後臺]顏色我的主題)

+0

看看 http://stackoverflow.com/questions/3430343/how-can-the-colors-of-an-image-be-changed-using-css3 – Ingo 2013-02-15 08:33:27

回答

0

號由於這些圖像圖標,你不能改變它們的顏色。您可以嘗試使用這些http://www.entypo.com/。由於這些是字體,他們可以很容易地改變顏色。

1

您可以使用圖像色調,但我不知道它是否會爲您提供您所期望的效果:

基本上你換一個<figure>元素的<img/>周圍,將樣式應用到它:

/*HTML*/ 
<figure class="tint"> 
    <img src="icon.png" width="400" height="260"> 
</figure> 

/*CSS*/ 
.tint { 
    position: relative; 
    float: left; 
    cursor: pointer; 
} 

.tint:before { 
    content: ""; 
    display: block; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: rgba(0,255,255, 0.5); 
    -moz-transition: background .3s linear; 
    -webkit-transition: background .3s linear; 
    -ms-transition: background .3s linear; 
    -o-transition: background .3s linear; 
    transition: background .3s linear; 
} 

.tint:hover:before { 
    background: none; 
} 

查看link瞭解演示和完整代碼示例。

在這個website你也可以查看一些不同的方法。

+0

。當然,這是隻有當你使用''標籤。否則,如果它是CSS的背景,我不知道如何改變它。 – NielsInc 2013-02-15 09:21:12

+0

謝謝,但是它的背景也是如此(我可以通過在父標籤中加上'style =「background-color:red」)來獲得。 – stackoverflowuser95 2013-02-15 12:18:45