WP亮度或不透明度？ - 變暗灰度縮略圖，滾動到顏色

因此，在這裏有很多關於從正常圖像翻轉成彩色/變暗圖像的問題，但我實際上試圖做相反的事情。我希望我的縮略圖能夠以灰度顯示，明顯變暗，並在翻轉時顯示自然的全綵色圖像。WP亮度或不透明度？ - 變暗灰度縮略圖，滾動到顏色

我的灰度彩色懸停工作正常。我只是有問題使圖片變暗，所以我實際上可以看到我的帖子標題。我對jQuery一無所知，但對於CSS來說「沒關係」。

這裏是我與當前正在使用的代碼：

.post_home {width: 305px; height: 175px; float: left; margin: 0 0 25px 15px; visibility: visible; 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 10+, Firefox on Android */ filter: gray; /* IE5+ */ -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */}

.post_home:hover {filter: none; -webkit-filter: grayscale(0); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");}

.thumb {display: block; width: 305px; height: 175px; position: relative; background-color: #000}

.thumb img {display: block; width: 305px; height: 175px; opacity: .4;}

.thumb img:hover {display: block; width: 305px; height: 175px; opacity: 1;}

我99％這個CSS也很重。我是一名印刷設計師，而不是網絡，所以如果你看到任何我應該修剪下來的脂肪，隨時可以這麼說。

本網站有同樣的效果我要去爲：Truf Creative

來源

2013-07-16 user2586369

感謝所有，這個網站一直是超級有用的，這樣遠離對方禁區主題。 – user2586369

圖出來。我是一個巫師。 – user2586369

放入黑色背景一盒你的形象，並給opacity圖像。

我剛剛創建這個例子：任何幫助 http://jsfiddle.net/jeromeM/KsbQp/

來源

2013-07-16 09:49:43 jjj

我其實已經嘗試過......我覺得不透明必須從父母身上繼承下來嗎？即使我使用：hover – user2586369

將其重置時，降低的不透明度仍然保持不變。儘管如此，它仍然存在，但我在這裏遇到了一個新問題：http://stackoverflow.com/questions/17674957/clickable-transparent -png 如果你有時間。如果沒有，不用擔心，並感謝稱重！ – user2586369

請給出一個鏈接來檢查繼承。 – jjj

WP亮度或不透明度？ - 變暗灰度縮略圖，滾動到顏色

回答

相關問題