在CSS中變成灰色圖標？

想知道這些傢伙在http://sociali.st如何將他們的黑色圖標在他們的CSS中變成灰色（「與愛情相關」部分）。這是新的，不能弄清楚。在CSS中變成灰色圖標？

是他們的一些財產，讓我改變黑色圖標爲灰色的？

2014-09-03 Peekay

您是否檢查過？該網站正在使用不透明度：0.4 – 2014-09-03 17:51:35

當然，但仍無法弄清楚。這很新鮮。 – Peekay 2014-09-03 17:54:16

您可以爲自己這樣做。

但是，如果你想改變多彩圖像灰度那麼你可以使用這樣的：

div:hover{ 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ 
filter: gray; /* IE6-9 */ 
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ 
}

如果你想使用不透明則見code跨瀏覽器的兼容性：

/* IE 8 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 

    /* IE 5-7 */ 
    filter: alpha(opacity=50); 

    /* Netscape */ 
    -moz-opacity: 0.5; 

    /* Safari 1.x */ 
    -khtml-opacity: 0.5; 

    /* Good browsers */ 
    opacity: 0.5;

來源

2014-09-03 18:02:36

謝謝，那個伎倆！ – Peekay 2014-09-03 18:09:37

非常歡迎！ – 2014-09-03 18:10:10

他們使用的是:hover風格把它變成灰色：

.button.button-app-store:hover { 
    background: #262626; 
    ...

懸停pseduo類是突出一個可操作的元素是有用的，但它也可以用來創建一些不錯的技巧 - 比如級聯下拉列表菜單。它通常用於鏈接和按鈕來創建這種效果。

使用Chrome開發人員工具，您可以檢查元素，然後模擬懸停狀態是這樣的：

enter image description here

它告訴你他們是如何達到這種效果。現在

如果取消懸停狀態，你可以看到，它通過這種風格回落到黑色：

.button.button-app-store { 
    background: #171717; 
    ...

來源

2014-09-03 17:49:07 Mrchief

嗯......我的Firefox在右邊顯示了一組不同的標籤......規則，計算，字體，框模型。 – 2014-09-03 18:01:50

我使用Chrome開發工具，而不是Firebug。或者你是否說Firefox中出現了另一個網站？ – Mrchief 2014-09-03 18:03:08

對，明白了。我仍然發現Chrome Dev和Firebug都有些莫名其妙，需要更多地研究它們。 – 2014-09-03 18:05:33

他們利用他們的黑色圖像精靈與.4不透明。一旦：懸停他們消除不透明限制。這是精靈的樣子在混濁1：

enter image description here

通過使用Firebug檢查元素想通了。由這是很好的與黑色圖像的方式做

div{ 
    background: url(path.jpg) no-repeat; 
} 
div:hover{ 
    opacity: .4; 
}

和：

來源

2014-09-03 17:52:34 aas4mis

我不認爲你的回答是正確的。我同意Chief先生的看法。 – 2014-09-03 17:56:48

他們不使用精靈，只是改變背景顏色。看到我的答案。 – Mrchief 2014-09-03 17:57:12

看起來像一個精靈... http://sociali.st/wp-content/themes/socialist/library/css/../images/views/home/home-trust-logos.png？緩存= 251127031 只是顯示原始圖像實際上是黑色的。不透明度正在做所有的工作。 – aas4mis 2014-09-03 17:59:52

在CSS中變成灰色圖標？

回答

相關問題