带有CSS的图像灰度和鼠标悬停时重新着色?

Posted

技术标签:

【中文标题】带有CSS的图像灰度和鼠标悬停时重新着色?【英文标题】:Image Greyscale with CSS & re-color on mouse-over? 【发布时间】:2011-11-08 14:10:36 【问题描述】:

我正在寻找一个彩色图标(将是一个链接)并将其变为灰度,直到用户将鼠标放在图标上(然后它将为图像着色)。

这是否可行,并且是否支持 IE 和 Firefox?

【问题讨论】:

几乎重复了...***.com/q/609273/670377 如果你反过来做会不会更有趣?让鼠标光标有点像魔杖,给黑暗的世界带来色彩? 【参考方案1】:

有很多方法可以做到这一点,我将在下面用几个例子来详细说明。

纯 CSS(仅使用一张彩色图片)

img.grayscale 
  filter: url("data:image/svg+xml;utf8,<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></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */


img.grayscale:hover 
  filter: none;
  -webkit-filter: grayscale(0%);

img.grayscale 
  filter: url("data:image/svg+xml;utf8,<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></svg>#grayscale");
  /* Firefox 3.5+, IE10 */
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(100%);
  /* Chrome 19+ & Safari 6+ */
  -webkit-transition: all .6s ease;
  /* Fade to color for Chrome and Safari */
  -webkit-backface-visibility: hidden;
  /* Fix for transition flickering */


img.grayscale:hover 
  filter: none;
  -webkit-filter: grayscale(0%);


svg 
  background: url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);


svg image 
  transition: all .6s ease;


svg image:hover 
  opacity: 0;
<p>Firefox, Chrome, Safari, IE6-9</p>
<img class="grayscale" src="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" >
<p>IE10 with inline SVG</p>
<svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377"  >
  <defs>
     <filter id="filtersPicture">
       <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
       <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
    </filter>
  </defs>
  <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0"   xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
   </svg>

您可以找到an article related to this technique here。

纯 CSS(使用灰度和彩色图像)

这种方法需要图像的两个副本:一个是灰度的,另一个是全彩色的。使用 CSS :hover psuedoselector,您可以更新元素的背景以在两者之间切换:

#yourimage  
    background: url(../grayscale-image.png);

#yourImage:hover  
    background: url(../color-image.png;

#google 
  background: url('http://www.google.com/logos/keystroke10-hp.png');
  height: 95px;
  width: 275px;
  display: block;
  /* Optional for a gradual animation effect */
  transition: 0.5s;


#google:hover 
  background: url('https://graphics217b.files.wordpress.com/2011/02/logo1w.png');
&lt;a id='google' href='http://www.google.com'&gt;&lt;/a&gt;

这也可以通过以相同方式使用基于 javascript 的悬停效果(例如 jQuery 的 hover() 函数)来实现。

考虑第三方库

desaturate 库是一个通用库,可让您在给定元素或图像的灰度版本和全彩版本之间轻松切换。

【讨论】:

如果上述图片需要链接到其他网站,如果图片被设置为背景怎么办? 它的工作方式相同,请查看第 1 部分下的演示。如果您有任何其他问题,我很乐意提供帮助。 伙计们,有没有人注意到这在 safari 中不起作用?我刚查了一下,发现这个问题,有什么办法可以解决吗?【参考方案2】:

在这里回答:Convert an image to grayscale in html/CSS

您甚至不需要使用两个听起来很痛苦的图像或图像处理库,您可以通过跨浏览器支持(当前版本)来做到这一点,只需使用 CSS。这是一种渐进式增强方法,只是在旧浏览器上回退到彩色版本:

img 
  filter: url(filters.svg#grayscale);
  /* Firefox 3.5+ */
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(1);
  /* Google Chrome & Safari 6+ */

img:hover 
  filter: none;
  -webkit-filter: none;

filters.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>
</svg>

【讨论】:

【参考方案3】:

我在http://www.diagnomics.com/上使用以下代码

带有放大效果(比例)的从黑白到彩色的平滑过渡

    img.color_flip 
      filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
      filter: gray; /* IE5+ */
      -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
      -webkit-transition: all .5s ease-in-out;
    

    img.color_flip:hover 
      filter: none;
      -webkit-filter: grayscale(0);
      -webkit-transform: scale(1.1);
    

【讨论】:

在 webkit 浏览器中效果很好!您的代码在 Firefox 浏览器中对我不起作用,但话又说回来,我认为它与 SVG 文件有关,我在这个小提琴中使用了位图 jsfiddle.net/coolwebs/num04rya/10 虽然有些奇怪 - Safari 中的过渡效果使图像翻车时“混蛋”....【参考方案4】:

您可以使用sprite,其中存储了彩色和单色两种版本。

【讨论】:

【参考方案5】:

这是一个演示。甚至可以在 IE7 中使用:

http://james.padolsey.com/demos/grayscale/

http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/

【讨论】:

以上是关于带有CSS的图像灰度和鼠标悬停时重新着色?的主要内容,如果未能解决你的问题,请参考以下文章

在鼠标悬停时将文本悬停在帖子图像上

在剪贴蒙版内悬停时从灰度更改为彩色

CSS/HTML:点击时删除图像过滤器

使用CSS - ExtJs进行鼠标悬停时如何更改面板上的图像?

如何通过将鼠标悬停在同一页面上的图像上来触发 CSS 动画按钮

将鼠标悬停在Javascript和/或CSS列表中的相应单词时,如何显示不同的图像?