小技巧——整個頁面變為純黑白顯示(包括圖片和文字)
阿新 • • 發佈:2019-01-27
####廢話不多說,首先大家要知道有filter這麼一個css屬性
1、如果是單張圖片或單段文字變黑白的話只需在對應元素的css樣式中加如下程式碼即可:
img,div{
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
2、如果想讓整個頁面所有元素都變成黑白色,則:
//下面為百度百科頁面css樣式寫法 html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><filter ….3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\"/></filter></svg>#grayscale"); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter: gray; -webkit-filter: grayscale(1); }