相关疑难解决方法(0)

使用CSS使图像显示为"灰显"(即,不加载图像的单独灰色版本)的最佳方法(如果有的话)是什么？

我的上下文是我在一个表中有行,在最右边的单元格中都有按钮,有些行需要看起来比其他行更亮.因此,当然我可以轻松地使字体更轻,但我也想让图像更轻,而无需管理每个图像的两个版本.

每当鼠标悬停在只有CSS的图像上时,我就会尝试为图像添加透明的黑色叠加层.这可能吗？我试过这个:

http://jsfiddle.net/Zf5am/565/

但我无法让div出现.

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
    <div class="overlay" />
</div> 

.image {
  position: relative;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}
.image img {
  max-width: 100%;
  max-height: 100%;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  background-color: red;
  z-index: 200;
}
.overlay:hover {
  display: block;
}

我想要一个彩色的图标(并将是一个链接)并将其转换为灰度,直到用户将鼠标放在图标上(然后它将为图像着色).

这可能吗,并且以IE和Firefox支持的方式？

我在网上搜索了很多,但我找不到一个跨浏览器解决方案来淡化css背景图像到灰度和背面.

唯一可行的解​​决方案是应用CSS3过滤器灰度:

-webkit-filter: grayscale(100%);

但这适用于Chrome v.15 +和Safari v.6 +(你可以在这里看到:http://css3.bradshawenterprises.com/filters/ )

在线的许多页面都谈到了灰色元素的解决方案:

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 */

(你可以在这里看到:http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html)

但实际上它似乎不适用于CSS背景图像,就像webkit过滤器那样.

是否有任何解决方案(可能使用jquery？)来破解在不太先进的浏览器上缺少对过滤器的支持？

这个CSS代码非常适合Internet Explorer,直到9.

img.gray {
    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");
    filter: gray;
    -webkit-filter: grayscale(1);
}

但是我需要为Internet Explorer 10做些什么？

更新

我刚刚意识到去饱和只适用于Chrome.如何在FF,IE和其他浏览器中使用它？(标题改变了)

我按照这里的建议将彩色图片 转换为灰度:在HTML/CSS中将图像转换为灰度

它的效果很好(在Chrome中):http://jsfiddle.net/7mNEC/

<img src="https://imagizer.imageshack.us/v2/350x496q90/822/z7ds.jpg" />

// CSSS
img {
    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");
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
    filter: gray; 
}

img:hover {
    filter: none;
    cursor: pointer;
}

但我无法消除鼠标上的去饱和现象.

对我做错了什么想法？

背景:我需要能够以"禁用"外观创建图像.通常建议的方法是将图像转换为灰度并显示灰度图像.缺点是它只适用于图像,因此显示图形很麻烦,因为您无法立即访问处于禁用状态的图像.现在我认为这可以使用java.awt.Composite动态完成(然后我不需要知道如何实现一个Icon来禁用它).似乎没有实现转换为灰度,所以我必须创建自己的......

也就是说,我将一个实现混合在一起(并且它呈现了我所期望的).但我不确定它是否真的适用于所有情况(复合/ CompositeContext的Javadocs对于这样一个复杂的操作看起来非常薄).正如你从我的实现中看到的那样,我采用了一种迂回的方式来逐像素处理,因为似乎没有简单的方法来批量读取/写入像素,而这种格式不是由所涉及的栅格决定的.

欢迎任何指向更广泛的文档/示例/提示的指针.

这是SSCCE - 它通过DisabledComposite渲染(彩色)GradientPaint,将渐变转换为灰度.请注意,在现实世界中,您将无法知道通过哪些调用呈现的内容.Gradient实际上只是一个例子(对不起,但是人们常常没有这样做,所以这次我会明确说明).

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Composite;
import java.awt.CompositeContext;
import java.awt.Dimension;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.image.ColorModel;
import java.awt.image.Raster;
import java.awt.image.WritableRaster;

import javax.swing.JComponent;
import javax.swing.JFrame;
import javax.swing.SwingUtilities;

public class CompositeSSCE implements Runnable {

    static class DisabledComposite implements Composite {
        @Override
        public CompositeContext createContext(
            final ColorModel srcColorModel,
            final ColorModel dstColorModel,
            final RenderingHints hints) {
            return new DisabledCompositeContext(srcColorModel, dstColorModel);
        }
    } 

    static class DisabledCompositeContext implements CompositeContext {

        private …

可能重复:
在HTML/CSS中将图像转换为灰度

我怎样才能把一个彩色图像转换为灰色或黑色/白色图像像这样的网站使用CSS？

可以单独使用CSS还是需要JavaScript(jQuery)？

谢谢.

编辑:

谢谢你的回答.我注意到诀窍是制作两种不同的彩色图像 - 一种是全彩色,另一种是黑白.我希望这可以在一张图片中完成.所以没有办法做到这一点,除了'技巧'？

我正在尝试在Canvas中构建一个平面图模型.目前,我的画布中有一个网格图像,用户可以通过单击并拖动鼠标来绘制线条.但是,这并不能保证直线.

无论如何,我可以在html页面中提供输入字段,供用户输入行的开始和结束x和y坐标,并在我的画布代码中更新它？我是JS/AJAX的初学者,所以任何补救的帮助都很受欢迎:)

现在,这是决定如何绘制线条的部分:

$(document).ready(function() {

    var canvas = document.getElementById('canvas');
    var context = canvas.getContext("2d");

    if(canvas.getContext) {
        $('#canvas').mousedown(function (evt) {
            var offset = $('#canvas').offset();
            context.beginPath();
            context.moveTo(20, 20);
        });

        $(document).mousemove(function(evt) {
            var offset = $('#canvas').offset();
            context.lineTo(evt.pageX - offset.left, evt.pageY - offset.top);
            context.stroke();
        }).mouseup(function() {
            $(document).unbind('mousemove');
            $(document).unbind('mouseup');
        });

        $('#clearcanvas').click(function () {
          context.clearRect(0, 0, 600, 580);    
        });
    }
}); 

我怀疑它涉及修改以下代码:

context.lineTo(evt.pageX - offset.left, evt.pageY - offset.top);

试图将图像转换为灰度并在悬停时恢复正常 - 查看在HTML/CSS中将图像转换为灰度

对于正常的过滤器使用,IE中的一切工作正常,但Firefox中的SVG方法并不是那么顺利.我的页面都存在于站点的根目录中,然后是/SiteStyles/Styles.css中的样式表,我在其中调用.homeCaseStudyImage img {filter:url(filters.svg #grayscale);

我的filters.svg也位于/ SiteStyles目录中.看起来像这样:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" baseProfile="full" 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>

我知道这适用于其他人所以我猜这与我的文件夹结构有关,或者可能没有引用与SVG有关的东西？

任何帮助表示赞赏

有没有办法通过CSS在chrome中制作灰度图像？

我试过这个,但不适用于最新版本的chrome

詹姆斯在这里 我看过50多个教程,但我似乎无法找到一个简单的紧凑jQuery灰度教程.我尝试过的每一个脚本都无法在我尝试启用此功能的网站上运行.如果有人可以帮助我完成一个脚本,使图像没有高度,但页面加载的宽度为500px灰度,但在悬停时更改为颜色,这将是非常棒的.我相信这个脚本会使用HTML5 Canvas.

我想这样做:http://jamestestblog.tumblr.com/

我正在尝试创建一个菜单，其中每个链接旁边都有一个图像/图标。我希望图像在不活动时是黑白的，但是当我将鼠标悬停在图像和文本上时是彩色的。

我尝试使用 .svg，如另一个问题（/sf/answers/282023591/）中所述，它有效，但仅当我将鼠标悬停在图像上时，而不是文本：/。

这是图像的CSS：

.nav img
{
    height: 30px;
    width: 30px;
    margin-right: 5px;
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

.nav img:hover 
{
    filter: none;
    -webkit-filter: grayscale(0);
}

以及菜单的样子：

<div class="nav">

        <ul>

            <li id="home"><a href="index.php"><img src="menu/person.png">Présentation</a></li>
            <li id="formation"><a href="formation.php"><img src="menu/tablet.png">Formations</a></li>
            <li id="competence"><a href="competences.php"><img src="menu/etiquette.png">Compétences</a></li>
            <li id="experience"><a href="experiences.php"><img src="menu/work.png">Expériences</a></li>
            <li id="autre"><a href="autres.php"><img src="menu/autre.png">Autres</a></li>

        </ul>

    </div>

谢谢你。