css如何把图片设置为黑白_使用CSS将图像转换为黑白图像

css如何把图片设置为黑白

Desaturating a color image couldn’t be simpler with CSS. The filter is typically applied as a class, as you will often want several images to have the same visual effect:

用CSS对彩色图像进行饱和绝非易事。滤镜通常作为class来应用，因为您通常希望多个图像具有相同的视觉效果：

img.desaturate {filter: grayscale(100%);
}

(Note the spelling of “grayscale”; the alternative spelling will not work)

(请注意“灰度”的拼写；其他拼写将不起作用)

Applying the class to the image is also straightforward:

将类应用于图像也很简单：

<img src="lena-söderberg.jpg" alt="Lena Söderberg" class="desaturate">

添加SVG滤镜效果 (Add An SVG Filter Effect)

The CSS shown to this point works in all modern browsers on desktop and mobile, including Microsoft Edge.

至此所示CSS在台式机和移动设备上的所有现代浏览器(包括Microsoft Edge)中均可使用。

To gain the same effect in Firefox previous to version 35, we need to use an SVG filter, which I’ll create as a separate document named desaturate.svg. The code for that file will be:

为了在版本35之前的 Firefox中获得相同的效果，我们需要使用SVG过滤器，我将其创建为名为desaturate.svg的单独文档。该文件的代码将是：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><filter id="greyscale"><feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 00.3333 0.3333 0.3333 0 00.3333 0.3333 0.3333 0 00 0 0 1 0" /></filter>
</svg>

If the SVG code looks slightly daunting – and the matrix math behind it is somewhat complex – don’t worry. This is one piece of code that I’d actually encourage you to copy and paste as a generic “recipe”; I’ll explain matrix transformations in a future article.

如果SVG代码看起来略微令人望而生畏-和它背后的矩阵数学有些复杂-不要担心。这是我实际上鼓励您复制并粘贴为通用“食谱”的一段代码；我将在以后的文章中解释矩阵转换。

With the SVG file saved beside our HTML page and test image, the CSS is extended to become:

通过将SVG文件保存在我们的HTML页面和测试图像旁边，CSS扩展为：

img.desaturate {filter: grayscale(100%);filter: url(desaturate.svg#greyscale);
}

添加对IE的支持 (Add Support for IE)

To cover IE 6 – 9, we'll apply Microsoft’s simple but proprietary use of filter:

为了涵盖IE 6 – 9，我们将应用Microsoft简单但专有的filter用法：

img.desaturate{filter: gray;filter: grayscale(100%);filter: url(desaturate.svg#greyscale);
}

If you want to add in support for still older versions of Webkit:

如果要添加对更旧版本的Webkit的支持：

img.desaturate{-webkit-filter: grayscale(1);-webkit-filter: grayscale(100%);filter: gray;filter: grayscale(100%);filter: url(desaturate.svg#greyscale);
}

As noted in the Cross Browser Image Blur Effects article, this technique won't currently work in Internet Explorer 10 or 11. If you wanted to achieve the same visual result across absolutely every browser you could use a cross browser JavaScript solution. Alternatives include Greyscale.js.

正如“ 跨浏览器图像模糊效果”一文中指出的那样，该技术目前在Internet Explorer 10或11中不起作用。如果您想在绝对所有浏览器上都获得相同的视觉效果，则可以使用跨浏览器JavaScript解决方案。替代方法包括Greyscale.js 。

The CSS we've written here allows us to visually convert an image to black and white on the fly in our browser, with no need to save new versions in PhotoShop. Using CSS also makes the image much easier to modify: for example, you’ll see that lowering the percentage used in our declaration from 100% to 50% causes a visual blend of the desaturation effect with the original color image.

我们在这里编写CSS使我们能够在浏览器中将图像实时地转换为黑白图像，而无需在PhotoShop中保存新版本。使用CSS还可以使图像更容易修改：例如，您会看到将声明中使用的百分比从100％降低到50％会导致去饱和效果与原始彩色图像的视觉混合。

A slightly easier approach for older versions of Firefox inlines the SVG into the CSS directly, removing the need for any SVG code in the <body>:

对于较旧版本的Firefox而言，一种更简单的方法是将SVG直接内联到CSS中，从而无需<body>中的任何SVG代码：

img.desaturate {-webkit-filter: grayscale(100%);filter: grayscale(100%);filter: gray;filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><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>#greyscale");
}

翻译自: https://thenewcode.com/532/Convert-Images-To-Black-And-White-With-CSS

css如何把图片设置为黑白