文字图像马赛克

其实如何实现这种效果的原因是采用了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地址:34.204.198.73,归属地:弗吉尼亚州Ashburn ,欢迎您的访问!

温馨提示 : 非特殊注明,否则均为李联华的博客原创文章,本站文章未经授权禁止任何形式转载
文章链接:https://www.ooize.com/text-image-mosaic.html
订阅
提醒
guest
0 评论
内联反馈
查看所有评论
Loading...