CSS圖像疊加

Question

我正在爲我的公司創建一個模板，用於各種不同客戶站點的道路上，並且它們都將採用不同的顏色。我爲這個模板創建了當前爲黑色（或白色）的圖標，我希望能夠通過css控制這些圖標的顏色。他們是一個簡單的顏色，並在Photoshop中，如果你做一個混合選項的顏色疊加，並選擇1色，他們看起來不錯。這有可能在CSS中完成，因此當有人爲未來的客戶編輯此模板時，他們可以控制css中的圖標顏色，而不必每次都在Photoshop中編輯每個圖標。

Answer 1

如果你的圖標是一個你可以用css製作的圖形，它可以工作，但我從來沒有聽說過任何人在做你之前正在談論的內容。

Answer 2

它不可能使用css改變圖標的​​顏色。你可以塑造它，你可以給透明度，不透明度等

Answer 3

不可能通過CSS。你可以使用像Canvas這樣的動態技術，但這不是好的方法。我寧願創建工具來創建所需顏色的圖標集。你可以用PHP（phpGD或ImageMagick here is example of similiar problem）來完成。

Answer 4

你可以用圖像來做到這一點（只要背景顏色一致），但它需要在盒子外面思考一下。在Photoshop中打開圖標的圖像文件（或類似文件）。編輯它以便「圖標」部分（即當前黑色的位）是透明的，並且背景（即不是圖標所描繪的位）填充爲白色（或任何背景顏色爲）。基本上你已經「顛倒了圖像的極性」。將圖片放入網頁中，然後使用CSS指定它爲background-color。你的圖標應該以這種顏色出現。 編輯：事情是這樣的：http://coding.smashingmagazine.com/2010/10/31/transparent-css-sprites/

A [潛在]更簡單的方法是使用一個圖標字體像http://pictos.cc/。這只是文字，所以你可以像往常一樣用CSS來着色。

Answer 5

可以在CSS中更改徽標的顏色，但不能解決您正在討論的問題。要製作一個可更改的徽標，您需要製作一個帶有透明度的PNG，其中徽標是和負面空間中的（網頁的）背景顏色。然後將其放在具有所需徽標顏色的P或div作爲背景顏色。

麻煩的是，您剛剛交換了一個靈活的標誌顏色爲不靈活的「背景」顏色。

更好的是隻包含標誌，白色和黑色的顏色，作爲所有網站所提供的「包裝」的一部分。只需在CSS中調用你想要的那個。

Answer 6

你可以用CSS僞元素和半透明疊加層來做到這一點。您可以按照下列指示：http://www.impressivewebs.com/image-tint-blend-css/

如果你有矢量標誌，您可以用SVG標誌更容易做到這一點（通過改變你的SVG的顏色）。

Answer 7

如果您將圖標圖像變爲字體，那麼您可以通過CSS完全控制尺寸和顏色。查看非常流行的Font-Awesome字體，旨在恭維Twitter Bootstrap。

我不是字體的專家，但如果這種做法聽起來像一個合適的，你會做這樣的事情：

• 從你的圖標創建矢量圖形
• 它們加載到一個字體編輯器，像FontLab Studio
• 將新字體添加到您最喜歡的Web應用程序中。如果你需要這個指導，FontSquirrel.com會生成很棒的@ font-face標記來包含他們的免費字體庫。

Answer 8

據我所知，它可以完成並且可以很好地與Firefox和Chrome配合使用。下面的例子。 http://demosthenes.info/blog/532/Convert-Images-To-Black-And-White-With-CSS

img { 
filter: grayscale(100%); 
-webkit-filter: grayscale(100%); 
-moz-filter: grayscale(100%); 
-ms-filter: grayscale(100%); 
-o-filter: grayscale(100%); 
} 

Answer 9

我想說的最好/最簡單的答案就是使用SVG。該徽標應該以矢量格式開始，以便可以縮放徽標，而不會從名片到廣告牌的細節丟失。

SVG'圖像'基於形狀。給出想要更改名稱的形狀，然後在CSS中對其進行處理以更改其顏色。

文章： http://css-tricks.com/using-svg/

和這個例子： http://codepen.io/chriscoyier/pen/evcBu

做解釋如何做到這一點，還炫耀其他可能性了出色的工作。

SVG至少基礎知識現在得到了廣泛的支持，ie8是唯一支持它的瀏覽器，即便如此，通過將SVG作爲圖像隨時渲染也可以解決這個問題。