使用css将彩色图片转换为黑白图片

全不栈

已于 2022-05-17 22:18:23 修改

阅读量1.4k

点赞数 3

文章标签： css html 前端

于 2022-05-17 22:14:24 首次发布

本文链接：https://blog.csdn.net/m0_64864889/article/details/124831080

版权

在下面我将讲解如何使用 CSS 的这个功能实现调整色调、模糊、亮度、对比度和一些其他的效果。

需要用到 filter 函数中：

grayscale函数

grayscale用于调整元素的灰度值。参数范围为0-1，0表示无效果，1表示灰度最大。

用法：filter: grayscale(1)。

contrast函数

contrast 调整元素的对比度。默认值为1，表示与原图一致，取值小于1时，对比度降低，取值大于1时表示对比度增大。

用法：filter: contrast(1) ，中间的值根据情况调整。

brightness函数

brightness用于调整元素的亮度。范围为0-1，0表示全黑，1表示最亮。

用法：filter: brightness(0)，显示为黑色。

其中：还会用到mix-blend-mode 混合混合模式来增加强光。

mix-blend-mode: hard-light;     // 强光

接下来咱们附上源码：

HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/style.css" />
    <title>将彩色照片转换为黑色肖像</title>
  </head>
  <body>
    <div class="box">
      <img src="./img/img2.png" />
    </div>
    <div class="box">
      <img src="./img/img2.png" />
    </div>
  </body>
</html>

css代码：

* {
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.box {
  position: relative;
  width: 50%;
  height: 100vh;
  overflow: hidden;
}
.box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.box:nth-child(2) img {
  filter: grayscale(1) contrast(5);
}
.box:nth-child(2) img:nth-child(2) {
  filter: grayscale(1) contrast(1) brightness(2);
  mix-blend-mode: hard-light;
}

结果就不供上了，自行运行即可！！