经常看到一些网站的底部有一些灰色的图标，鼠标移入的时候会变亮，开始以为是js操作src或者bg呢，搜索了一下，发现了一个更好的方法：通过css3的滤镜方法。
html代码：
<a href='' class='icon'><img src='utv.jpg' /></a>
css代码：
.icon{-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%); filter: grayscale(100%);filter: gray;}.icon:hover{filter: none;-webkit-filter: grayscale(0%);}
分享到：
相关推荐
4. 为了让Polyfill生效，确保在CSS滤镜声明前加上`-webkit-`前缀，以支持早期版本的Webkit内核浏览器（如Chrome和Safari早期版本）。 需要注意的是，虽然Polyfill可以提供一定的兼容性解决方案，但它也会增加页面的...
在现代网页设计中，CSS3已经成为了一种强大的工具，它为开发者提供了许多创新的功能和特性，其中滤镜（Filters）是提升网页视觉效果的重要一环。"一个不错的css3滤镜网页特效"这个主题，主要关注如何利用CSS3滤镜来...
【CSS3滤镜】 CSS3滤镜是CSS3中引入的一种增强网页视觉效果的特性，允许开发者对网页中的图像应用各种特效，如模糊、灰度、饱和度调整等。CSS3滤镜主要由Webkit内核的浏览器（如Chrome和Safari）首先支持，随后Fire...
【Canvas】在处理图像滤镜时也发挥着重要作用，尤其是在IE5.5到9这些不支持CSS滤镜的版本中。开发者可以通过JavaScript访问Canvas的2D渲染上下文，使用`getImageData()`和`putImageData()`方法读取和修改像素数据，...
【标题】中的“纯CSS3滤镜实现的波光粼粼水面动画特效源码”表明这是一个使用CSS3滤镜技术创建的水面波动动画效果。在Web开发中，CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，它引入了许多新的特性和...
在前端开发中，CSS3滤镜提供了一种强大的方式来改变元素的视觉表现，其中`filter: blur()`属性尤其引人注目。它允许我们为元素添加模糊效果，从而创造出各种创意设计，如毛玻璃（也称为磨砂玻璃或模糊背景）效果。...
在CSS3中，滤镜（filter）属性是一个强大的工具，它可以让我们对网页元素应用各种视觉效果，其中之一就是模糊效果。`filter: blur()`是CSS3滤镜功能的一部分，它允许我们轻松地为图像、背景甚至是整个元素添加模糊...
总之，"图片旋转缩放翻转变换效果(css3滤镜canvas).zip"这个资源包是一个很好的学习材料，它涵盖了前端开发中关于CSS3变换、Canvas绘图和滤镜的重要知识点。通过实践和理解这些内容，开发者能够提升网页的互动性和...
在CSS3中，滤镜功能提供了丰富的样式和效果，使得网页设计变得更加动态和富有创意。 描述中提到的“滤镜特效HML5+CSS3”暗示我们将探讨如何结合这两种技术来实现这些特效。HTML5是第五代超文本标记语言，增强了网页...
使用方法很简单，点击 Add Filter 按钮就可以看到当前 CSS3 所支持的所有滤镜效果了。 点击不同的滤镜效果就可以添加各种参数了，效果会即时的显示在右边的界面中，参数有点类似 Photoshop 的图层效果，具有一定的...
纯CSS3图片滤镜效果是现代网页设计中一个引人注目的特性，它允许开发者无需借助JavaScript或者其他图像处理软件，就能直接在浏览器中为图片应用各种视觉特效。这个压缩包"纯CSS3图片滤镜效果.zip"很可能包含了若干...
CSS滤镜主要通过两种方式实现：CSS3标准滤镜和老版的AlphaImageLoader滤镜。IE9及以下版本主要支持后者，而IE10开始逐渐向CSS3标准过渡。 1. **CSS3滤镜**：这是现代浏览器广泛支持的标准，例如`filter`属性，可以...
CSS3的滤镜（filter）属性是一个强大的工具，它允许开发者对网页元素，尤其是图像，进行各种视觉效果处理。这个属性引入了一套丰富的滤镜功能，使得网页设计者无需依赖额外的图形软件，就能实现类似Photoshop的效果...
CSS滤镜大全 各类滤镜 HTML滤镜大全 IE滤镜大全
在CSS3中，我们可以利用各种特性来创建丰富的视觉效果，其中“遮罩层滤镜”和“文字发光动画”是两个极具创意的设计元素。这款特效结合了这两种技术，为文字添加了动态的发光效果，使其在网页上更具吸引力。下面我们...
- 浏览器兼容性：虽然CSS3滤镜在现代浏览器中广泛支持，但老版本的IE可能需要使用其特有的滤镜语法，如`filter`属性。 - 性能：过度使用滤镜可能影响页面性能，特别是在移动设备上。因此，适度使用并优化滤镜效果是...
CSS滤镜是现代Web设计中一个非常强大的工具，它们允许开发者在不使用任何图像编辑软件的情况下，对网页上的图片和元素应用各种视觉效果。在给定的文件中，提到了一系列的CSS滤镜效果，接下来将对这些滤镜进行详细的...