Question

我有几个缩略图，每个都包含图像和标题。我以前使用opacity在:hover上的黑白和彩色版本的图像之间淡入淡出，但现在我已经将图像转换为Bootstrap中的img-responsive了3，因为它需要position: absolute。

我设法使用-webkit-filter: grayscale效果而不是两个图像来使用它，但显然这仅适用于兼容的浏览器。有没有办法以跨浏览器的方式实现这一目标？

目前代码如下：

HTML

<div class="col-xs-3">
<div class="thumbnail">
<div class="thumbnail-image">
<!-- <img src="images/BW.png" class="img-responsive" alt="(Black & White)" /> -->
<img src="images/Colour.png" class="img-responsive" alt="(Colour)" />
</div>
<div class="caption">
<h3>Thumbnail</h3>
<p>Thumbnail caption.</p>
</div>
</div>
</div>

CSS

.thumbnail:hover {
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.thumbnail-image img {
transition-duration: 0.5s;
transition-timing-function: ease;
-webkit-filter: grayscale(100%);
}

.thumbnail:hover .thumbnail-image img {
-webkit-filter: grayscale(0%);
}

Answer 1

将其添加到您的CSS中以使其在IE7-9中运行。

.thumbnail-image img {
transition-duration: 0.5s;
transition-timing-function: ease;
-webkit-filter: grayscale(100%);
-ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';
filter:progid: DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

.thumbnail:hover .thumbnail-image img {
-webkit-filter: grayscale(0%);
-ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=0)';
filter:progid: DXImageTransform.Microsoft.BasicImage(grayscale=0);
}

Answer 2

几个月后回到这个问题，我发现这是最确定的答案：

http://labs.voronianski.com/css3-grayscale/

.grayscale { 
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
}

Bootstrap 3中的响应式图像翻转过渡

2 个答案: