1. 程式人生 > >小技巧——整個頁面變為純黑白顯示(包括圖片和文字)

小技巧——整個頁面變為純黑白顯示(包括圖片和文字)

####廢話不多說,首先大家要知道有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); 
}