制作img黑白css(1) - 芒果文档

📌 相关文章

📜 制作img黑白css(1)

📅 最后修改于: 2023-12-03 15:07:16.724000 🧑 作者: Mango

制作img黑白css

在网页设计中，经常需要将一张彩色的图片转换成黑白图片。这篇文章将介绍如何通过CSS实现这个效果。

1. 使用CSS3的filter属性

CSS3新增了一些滤镜属性，其中filter属性可以处理图片的颜色，可以通过设置filter属性的值来将图片转换成黑白图片。

img {
  filter: grayscale(100%);
}

上面的代码将img元素的颜色处理为灰度，值为100%时表示完全的黑白图片。

注：这个方法虽然简单，但是需要浏览器支持CSS3的filter属性。

2. 使用SVG

可以通过SVG的feColorMatrix过滤器，将图片转换成黑白图片。下面是一个使用SVG的例子。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0">
  <filter id="grayscale">
    <feColorMatrix type="matrix"
      values="0.33 0.33 0.33 0 0
              0.33 0.33 0.33 0 0
              0.33 0.33 0.33 0 0
              0    0    0    1 0" />
  </filter>
</svg>

这个SVG定义了一个id为grayscale的过滤器，使用feColorMatrix实现灰度转换。接下来，将过滤器应用到img元素。

img {
  filter: url(#grayscale);
}

可以看到，使用SVG对图片进行处理比较麻烦，需要定义过滤器并将其应用到img元素。

注：这个方法比起第一种方法可以兼容更多的浏览器，但是代码较为冗长。

3. 使用canvas

在JavaScript中，可以使用HTML5新增的canvas元素，将图片转换成黑白图片。

<img id="image" src="path/to/image.png">
<canvas id="canvas"></canvas>

在JavaScript中，获取img元素和canvas元素，并将img元素绘制到canvas元素上，并将图像转换成灰度。

var img = document.getElementById('image');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

canvas.width = img.width;
canvas.height = img.height;

ctx.drawImage(img, 0, 0);

var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var pixels = imgData.data;

for (var i = 0; i < pixels.length; i += 4) {
  var r = pixels[i];
  var g = pixels[i + 1];
  var b = pixels[i + 2];
  var gray = (r + g + b) / 3;
  pixels[i] = gray;
  pixels[i + 1] = gray;
  pixels[i + 2] = gray;
}

ctx.putImageData(imgData, 0, 0);

上面的代码创建了一个img元素和canvas元素，并使用canvas将图片转换成黑白图片。这个方法复杂度最高，但是可以灵活的定义需要的效果。

注：这个方法需要JavaScript实现，但是可以定制更多的样式。

结论

三种方法均可以将图片转换成黑白图片，但是使用CSS3的filter属性最为简单，适用于一些简单的场景，而使用canvas最为灵活，可以实现定制化的效果。

返回的markdown格式如下：

# 制作img黑白css

在网页设计中，经常需要将一张彩色的图片转换成黑白图片。这篇文章将介绍如何通过CSS实现这个效果。 

## 1. 使用CSS3的filter属性

CSS3新增了一些滤镜属性，其中filter属性可以处理图片的颜色，可以通过设置filter属性的值来将图片转换成黑白图片。

```css
img {
  filter: grayscale(100%);
}