通过CSS实现将图片变黑白

一、背景和意义

有时候，需要将页面中的一些图片变成黑白色。这类场景包括：一年中某些特殊的日期；某些重大空难发生之后；某个物品/关卡解锁之前等等。让设计师用photoshop把图片改成黑白再挂到网页上当然也是一种可行的办法，但其成本肯定高于直接通过CSS实现。本文给出使用CSS实现图片转黑白的简单示例。

二、代码示例

2.1 使用filter(滤镜)

如果在网上搜索图片变黑白的方法，搜索到的最多的方法也是使用filter(滤镜)，即增加CSS属性filter: grayscale(1)。示例代码如下：

<style>
    .image {
        width: 320px;
        height: 240px;
        background-size: cover;
        background-image: url("https://5b0988e595225.cdn.sohucs.com/images/20171010/2ab85e31fee24a36b3e9bb79d71885b2.jpeg");
    }
    .grayscale {
        filter: grayscale(1);
    }
</style>

<p>原图：</p>
<div class="image"></div>

<p>使用filter(滤镜)后的图：</p>
<div class="image grayscale"></div>

运行结果如下：

2.2 使用background-blend-mode

除了filter之外，还有一种方法是使用background-blend-mode，不过background-blend-mode需要和background-color配合使用才能实现图片转黑白的效果，示例代码如下：

<style>
    .image {
        width: 320px;
        height: 240px;
        background-size: cover;
        background-image: url("https://5b0988e595225.cdn.sohucs.com/images/20171010/2ab85e31fee24a36b3e9bb79d71885b2.jpeg");
    }
    .grayscale {
        filter: grayscale(1);
    }
    .blend {
        background-color: #000;
        background-blend-mode: luminosity;
    }
</style>

<p>原图：</p>
<div class="image"></div>

<p>使用filter(滤镜)后的图：</p>
<div class="image grayscale"></div>

<p>使用background-blend-mode后的图：</p>
<div class="image blend"></div>

运行结果如下：

从上图来看，background-blend-mode和使用filter得到的效果差不多。

2.3 图上有文字的情况

在前面的示例中，background-blend-mode和使用filter得到的效果差不多。但是如果图片上方有文字，其效果会有所差异。示例代码如下：

<style>
    .image {
        width: 320px;
        height: 240px;
        background-size: cover;
        background-image: url("https://5b0988e595225.cdn.sohucs.com/images/20171010/2ab85e31fee24a36b3e9bb79d71885b2.jpeg");
        margin-top: 10px;
        font-size: 2rem;
        text-align: center;
        color: #ff0000;
    }
    .grayscale {
        filter: grayscale(1);
    }
    .blend {
        background-color: #000;
        background-blend-mode: luminosity;
    }
</style>

<div class="image">原图</div>
<div class="image grayscale">使用filter(滤镜)后的图</div>
<div class="image blend">使用background-blend-mode后的图</div>

运行结果为：

从上图可以看出，filter会把图片上的彩色文字也变成黑白，而background-blend-mode则不会。所以filter和background-blend-mode在实现效果上还是有差异的，具体用哪一个要看业务场景和具体的需求。