文字图像马赛克
其实如何实现这种效果的原因是采用了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.116.50.2,归属地:俄亥俄州Dublin ,欢迎您的访问!
文章链接:https://www.ooize.com/text-image-mosaic.html
文章链接:https://www.ooize.com/text-image-mosaic.html
订阅
登录
0 评论