通過CSS更改PNG圖像的顏色?



Answers

你可能想看看圖標字體。 http://css-tricks.com/examples/IconFont/

編輯:我在我的最新項目上使用Font-Awesome 。 你甚至可以引導它。 簡單地把它放在你的<head>

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">

<!-- And if you want to support IE7, add this aswell -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet">

然後繼續添加一些像這樣的圖標鏈接:

<a class="icon-thumbs-up"></a>

這是完整的備忘單

- 編輯 -

Font-Awesome在新版本中使用不同的類名,可能是因為這會使CSS文件大大縮小,並避免模糊的css類。 所以現在你應該使用:

<a class="fa fa-thumbs-up"></a>

編輯2:

剛發現github也使用它自己的圖標字體: Octicons它可以免費下載。 他們也有一些關於如何創建自己的圖標字體的提示

Question

給定一個透明的PNG顯示白色的簡單形狀,是否有可能以某種方式通過CSS改變這種顏色? 某種疊加或什麼不是?




回答是因為我正在為此尋找解決方案。

如果您有白色或黑色背景,@chrscblls答案中的筆效果很好,但我的答案不是。 另外,這些圖像是用ng-repeat生成的,所以我無法在我的css中找到它們的URL,也不能在img標籤上使用:: after。

所以,我想到了一個解決方案,並認為如果他們太絆倒在這裡可能會有幫助。

所以我所做的幾乎與三個主要區別相同:

  • 該網址在我的img標籤中,我把它(和一個標籤)放在另一個div上,其中:: after將起作用。
  • '混合混合模式'被設置為'差異'而不是'乘法'或'屏幕'。
  • 我之前添加了一個具有完全相同值的:: ::因此:: after將執行:: before之前的'差異'的差異並取消它。

要將其從黑色變為白色或白色變為黑色,背景色必須為白色。 從黑色到顏色,你可以選擇任何顏色。 從白色到色彩,你需要選擇與你想要的顏色相反的顏色。

.divClass{
   position: relative;
   width: 100%;
   height: 100%;
   text-align: left;
}
.divClass:hover::after, .divClass:hover::before{
   position: absolute;
   width: 100%;
   height: 100%;
   background: #FFF;
   mix-blend-mode: difference;
   content: "";
}

https://codepen.io/spaceplant/pen/oZyMYG




是的:)

Surfin'Safari - 博客存檔»CSS面具

WebKit現在支持CSS中的alpha蒙版。 蒙版允許您使用可用於在最終顯示中刪除該部分框的圖案疊加框的內容。 換句話說,您可以根據圖像的alpha值剪切複雜的形狀。
[...]
我們引入了新的屬性,為Web設計人員提供了對這些遮罩的大量控制以及如何應用這些遮罩。 新的屬性類似於已經存在的背景和邊框圖像屬性。

-webkit-mask (background)
-webkit-mask-attachment (background-attachment)
-webkit-mask-clip (background-clip)
-webkit-mask-origin (background-origin)
-webkit-mask-image (background-image)
-webkit-mask-repeat (background-repeat)
-webkit-mask-composite (background-composite)
-webkit-mask-box-image (border-image)



如果你只需要一個圖標,就不需要整個字體集,再加上我感覺它作為一個單獨的元素更“乾淨”。 所以,為此,在HTML5中,您可以直接在文檔流中放置SVG。 然後,您可以在.CSS樣式表中定義一個類,並使用fill屬性訪問其背景顏色:

工作小提琴: http://jsfiddle.net/qmsj0ez1/ : http://jsfiddle.net/qmsj0ez1/

請注意,在這個例子中,我用:hover來說明行為; 如果你只是想改變“正常”狀態的顏色,你應該刪除偽類。




想想我有一個解決方案,這是a)5年前你正在尋找的東西,和b)比這裡的其他代碼選項更簡單一些。

使用任何白色png(例如透明背景上的白色圖標),您可以添加:: after選擇器以重新著色。

.icon {
    background: url(img/icon.png); /* Your icon */
    position: relative; /* Allows an absolute positioned psuedo element */
}

.icon::after{
    position: absolute; /* Positions psuedo element relative to .icon */
    width: 100%; /* Same dimensions as .icon */
    height: 100%;
    content: ""; /* Allows psuedo element to show */
    background: #EC008C; /* The color you want the icon to change to */
    mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
}

看到這個codepen(懸停時應用顏色交換): http://codepen.io/chrscblls/pen/bwAXZO ://codepen.io/chrscblls/pen/bwAXZO




Links