从系统导出的图片，怎么弄已读的图片为灰色

html-css05

从系统导出的图片，怎么弄已读的图片为灰色,第1张

使用CSS过滤器属性可能是最简单的方法把图像变成灰度。

以往，IE浏览器有一个专有的CSS属性称为过滤应用自定义效果包括灰度。现在，过滤器属性是CSS3规范的一部分，并支持在一些浏览器，Firefox、Chrome和Safari。以前，我们也提到Webkit过滤器，它不仅将图像变成灰色也可以变成褐色和模糊效果。

<style>

.iu{

-webkit-filter: grayscale(100%)

-moz-filter: grayscale(1)

-ms-filter: grayscale(100%)

-o-filter: grayscale(100%)

filter: grayscale(100%)

filter: gray}

.iu img{width:800px}

.ui{-webkit-filter: grayscale(0%)width:800px}

</style>

<div class="iu" onmouseout="this.className='iu'" onmouseover="this.className='ui'"><img src="0006.png" /></div>

这个是需要应用css的滤镜来实现的，但是只有IE浏览器支持。

代码实例如下：

<html>    

<head>    

<title>Gray灰度</title>    

<style>    

<!--    

body{    

margin:12px    

}    

.gray{    

filter:gray /* 黑白图片 */    

}    

-->    

</style>    

  </head>    

<body>    

<img src="building5.jpg">&nbsp    

<img src="building5.jpg" class="gray">    

</body>    

</html>