网页前端设计

http://www.86y.org

搜索文章

让网站的图片变成灰色效果兼容所有主浏览器

用声音读出全文关注我吧
 2014/3/18 14:25:15 阅读次数:10507

以前有写过用 【HTML5&jQuery指向时图片从灰度变成彩色】 的文章,不兼容跨域的网站图片,所以今天看到有篇文章支持多浏览器图片变灰度的效果。就把上一篇文章改进一下。希望在前端努力的朋友可以借鉴一下。

兼容:兼容Firefox 3.5+, Opera 15+, Safari, Chrome, and IE。

效果图如下:

让网站的图片变成灰色效果兼容所有主浏览器

(因为本人虚拟机不支持SVG文件的打开,所以只能你自已手动复制内容到本地运行!)

 虚拟机不支持SVG 

源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css 指向时图片从灰度变成彩色 Demo</title>
<style type="text/css">   
body {background: #fff;color: #000;margin: 40px 0;}  
img {border: none;}  
h1 {font-size:18px;margin: 0 0 30px;padding: 0 0 20px;color: #999;border-bottom: solid 1px #ccc;clear: both;}
#pagewrap {width: 948px;margin: 0 auto; }  
.item { width: 296px;margin: 0 0 30px 30px;float: left;}  
.item.first {clear: left;margin-left: 0;}

/**关键代码**/
.item img {-webkit-filter: grayscale(100%);-webkit-filter: grayscale(1);filter: grayscale(100%);filter: url('download/gray.svg#grayscale');filter: gray;}
.item img:hover{-webkit-filter: grayscale(0%);-webkit-filter: grayscale(0);filter: grayscale(0%);filter: url('download/gray.svg#nograyscale');}
/**关键代码**/
</style>
</head>
<body>
<div id="pagewrap">
	<h1>css 指向时图片从灰度变成彩色 Demo <br/>兼容Firefox 3.5+, Opera 15+, Safari, Chrome, and IE</h1>  
	<div class="item first">
	  <div class="img_wrapper" style="display: inline-block; width: 296px; height: 170px;"> <a href="http://www.86y.org/art_detail.aspx?id=698"><img src="http://www.86y.org/upload/images/201416110039_themify.jpg" /></a></div>
	  <h3> Themify</h3>
	</div>
	<div class="item"> <a href="http://www.86y.org/art_detail.aspx?id=698"><img src="http://www.86y.org/upload/images/201416110041_icondock.jpg"/></a>
	  <h3> IconDock</h3>
	</div>
	<div class="item"> <a href="http://www.86y.org/art_detail.aspx?id=698"><img src="http://www.86y.org/upload/images/201416110041_webdesignerwall.jpg"  /></a>
	  <h3> Web Designer Wall</h3>
	</div>
	<div class="item first"> <a href="http://www.86y.org/art_detail.aspx?id=698"><img src="http://www.86y.org/upload/images/201416110041_koifish.jpg"  /></a>
	  <h3> Koi</h3>
	</div>
	<div class="item"> <a href="http://www.86y.org/art_detail.aspx?id=698"><img src="http://www.86y.org/upload/images/201416110042_phoenix.jpg"  /></a>
	  <h3> Phoenix</h3>
	</div>
	<div class="item"> <a href="http://www.86y.org/art_detail.aspx?id=698"><img src="http://www.86y.org/upload/images/201416110042_peacock.jpg"  /></a>
	  <h3> Peacock</h3>
	</div>
	<div class="item first"> <a href="http://www.86y.org/art_detail.aspx?id=698"><img src="http://www.86y.org/upload/images/201416110042_flow.jpg"  /></a>
	  <h3> Flow</h3>
	</div>
	<div class="item"> <a href="http://www.86y.org/art_detail.aspx?id=698"><img src="http://www.86y.org/upload/images/201416110043_webdesign136cover.jpg"  /></a>
	  <h3> Web Designer</h3>
	</div>
	<div class="item"> <a href="http://www.86y.org/art_detail.aspx?id=698"><img src="http://www.86y.org/upload/images/201416110043_sakura.jpg"  /></a>
	  <h3> Sakura</h3>
	</div>
</div>
</body>
</html>

gray.svg文件内容如下:(可复制另存为gray.svg,然后CSS中修改svg所在相应的目录即可)

<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>
<filter id="nograyscale"><feColorMatrix type="saturate" values="1"/></filter>
</svg>

总结:

为了能过跨浏览器支持灰度的效果,我们可以把上述方法和一起使用下面的代码片段去实现。这段代码将支持Firefox 3.5+, Opera 15+, Safari, Chrome, and IE

img { 
    -webkit-filter: grayscale(100%); 
    -webkit-filter: grayscale(1); 
    filter: grayscale(100%); 
   
    filter: url('download/gray.svg#grayscale'); 
    filter: gray; 
}

 

我们可以利用上面的代码和JavaScript方法和只提供CSS滤波器作为后备以防JavaScript被禁用。这个想法可以很容易地Modernizr的帮助下实现的。

.no-js img { 
    -webkit-filter: grayscale(100%); 
    -webkit-filter: grayscale(1); 
    filter: grayscale(100%); 
   
    filter: url('download/gray.svg#grayscale'); 
    filter: gray; 
}

(完)


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=698【让网站的图片变成灰色效果兼容所有主浏览器】幸凡学习网
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭