我在首页有一个客户徽标列表（视图块）。图像通过 ImageStyle 生成（调整大小和去饱和）。所以徽标是灰度的，但我需要在鼠标悬停时对它们进行着色。知道该怎么做吗？
我用谷歌搜索是否有办法用 css 制作图像灰度，但找不到。或者我找不到在 ImageStyle 中制作 2 个不同图像（一个彩色，一个灰度）的方法。
非常感谢您的帮助！非常感谢您的宝贵时间！
【问题讨论】：
标签： image drupal drupal-7 drupal-views drupal-modules
您可以设置两个具有相同尺寸的 ImageStyle。
一个是常规的彩色图像，另一个是过滤后的图像。设置应该是相同的（裁剪等），除了一个有去饱和过滤器。您可以调用一种设置“logo-thumb-normal”和一个“logo-thumb-filtered”
您现在应该有两个相同的输出图像，除了过滤之外，它们应该具有相同的文件名，尽管它们将位于不同的文件夹中。
将您的内容类型图像字段设置为使用“logo-thumb-filtered”。
因此，当您上传内容类型中的图像时，应该生成两个文件，每个设置一个文件：
/sites/default/files/styles/logo-thumb-normal/public/field/image/image.jpg 和
/sites/default/files/styles/logo-thumb-filtered/public/field/image/image.jpg
您可以按照 Spudley 的建议手动参考这两个图像，但更简单的方法可能是使用 jQuery 在悬停时交换图像（这里有一个简单的示例：http://jsfiddle.net/vSUkv/1/）：
$('.image1').hover(
function () {
src = $(this).attr('src');
$(this).attr('src', src.replace('filtered', 'normal'));
},
function () {
$(this).attr('src', src.replace('normal', 'filtered'));
}
);
编辑：
在 Drupal 7 中包含 jQuery：
要添加上面的脚本，您可以：
将自定义 JavaScript 文件添加到您的主题中（如果您还没有的话），方法是将行 scripts[] js/custom.js 添加到主题的 info 文件中。
在您的主题中创建js 文件夹，并在该文件夹中创建custom.js 文件。
将以下代码添加到您的 custom.js 文件中：
// We define a function that takes one parameter named $.
(function ($) {
// Store our function as a property of Drupal.behaviors
Drupal.behaviors.imageSwap = {
attach: function (context, settings) {
$('.hplogoclient a img').hover(
function () {
src = $(this).attr('src');
$(this).attr('src', src.replace('filtered', 'normal'));
},
function () {
$(this).attr('src', src.replace('normal', 'filtered'));
}
);
}
}
}(jQuery));
【讨论】：
我认为您将需要两张图片；一个用于灰度版本，一个用于彩色版本。目前，您无法在浏览器上轻松进行这种图像处理。 （事实上，如果你真的想这样做，可以使用一些更现代的浏览器功能，但它可能需要更多的工作，并且不会在所有浏览器中兼容，所以我现在坚持使用两个图像解决方案）
对于双图像的解决方案，如果你将图像设置为背景图像，那么在 CSS 中就相当简单了：
.myelement {
background-image:url(/path/to/greyscale.png);
}
.myelement:hover {
background-image:url(/path/to/fullcolour.png);
}
您也可以使用 CSS 'Sprites' 来实现，这基本上意味着将两张图片放在一个图像文件中，但要设置元素的大小，以便只有图像的适当部分可见；然后在:hover 样式中，调整偏移量，使图像的其他部分可见。
设置 CSS 精灵比简单地使用两个单独的图像要复杂一些，但值得付出努力。在此处了解有关如何执行此操作以及原因的更多信息：http://css-tricks.com/158-css-sprites/
【讨论】：
有一个非常简单的解决方案，只使用简单的 HTML 和 CSS：
HTML：
<div id="desaturate"> <a href="/thelink"> <a img src="/sites/default/files/images/yourfolders/image.png" alt="this image is">
CSS：
#desaturate img { opacity:0.4; padding-left: 20px; } #desaturate img:hover { opacity:1.0; }
【讨论】：
您现在可以在 CSS 中执行此操作，请参阅 http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html：
.myimage:hover {
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 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
.myimage {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
}
这省去了生成、存储和加载 2 张图像的麻烦。
【讨论】：