文字图像马赛克

其实如何实现这种效果的原因是采用了css3的一个新特性：

mix-blend-mode: multiply

<blend-mode> 的值可以是以下几个：

mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

然后再加上：

filter: contrast(60%);

然后在自己设置一下各个属性，基本上就可以形成下面的效果了：

代码实现：

HTML:

<div>
<img src="https://www.ooize.com/assets/uploads/2022/05/Untitled.png" alt="">
<p>这里可以是一篇小文章</p>
</div>

css：

@font-face {
  font-family: "inconsolata";
  src: url("https://www.ooize.com/assets/uploads/2022/04/ZenMaruGothic-Black.ttf") format("woff");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}
body {
  font-family: inconsolata;
  margin: 0;
  background: #000;
}

div {
  position: relative;
  overflow: hidden;
  line-height: 0;
}

img {
  width: 100%;
  filter: contrast(60%);
}

p {
  line-height: 1;
  text-align: justify;
  padding: 0.18vw;
  margin-top: 0;
  font-size: 1.76vw;
  color: #fff;
  background: #000;
  mix-blend-mode: multiply;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

动漫效果：

©️李联华的博客网 当前IP地址：18.190.207.122，归属地:俄亥俄州Dublin ，欢迎您的访问！