乐趣区

关于前端:CSS-基于文字的图片马赛克你见过吗

jiezi

看到封面这张图，是不是如同艺术品个别，第一次看到这张图时，是比拟震惊的，急不可待的钻研其源码是如何实现的，最初更为惊奇的是只须要纯 CSS 即可实现，接下来就开展阐明实现过程。

前置知识点

实现此成果须要理解 2 个前置的 CSS 知识点，滤镜 filter 属性中的 contrast 和mix-blend-mode属性。

filter: contrast

filter属性置信都有所触过，比方常见的 blur() 函数用于高斯含糊图片。除此之外还有很多其余函数可用，如下表所示：

Filter 形容
blur(px) 给图像设置高斯含糊
brightness(%) 将线性乘法器利用于输出图像，使其看起来或多或少地变得亮堂
contrast(%) 调整图像的对比度
drop-shadow() 给图像设置一个暗影成果
grayscale(%) 将图像转换为灰度图像
hue-rotate(deg) 给图像利用色相旋转
invert(%) 反转输出图像
opacity(%) 转化图像的通明水平
saturate(%) 转换图像饱和度
sepia(%) 将图像转换为深褐色
url() 获取指向 SVG 滤镜的 URI，该 SVG filter 能够嵌入到内部 XML 文件中

明天次要用到的是 contrast，用于调整图像的对比度。如下图所示，右侧图片是减少了filter: contrast(50%) 的成果。

浏览器兼容状况如下所示：

mix-blend-mode

mix-blend-mode该 CSS 属性作用是让元素内容和这个元素的背景以及上面的元素产生“混合”。设置不同 mix-blend-mode 值的成果如下所示：

具体含意解释如下：

  • multiply混合后通常色彩会加深，多用在红色背景图片和其余元素的混合，以及黑白纹理的合并上。
  • screen 混合后色彩会减淡，非常适合实现霓虹灯光成果，适宜彩色背景素材和其余元素混合，十分实用。
  • overlay 在色彩值暗的时候，采纳了相似“正片叠底”的算法，而色彩亮的时候，采纳了相似“滤色”的算法。此混合模式比拟适宜实现文字水印成果。
  • darken示意哪个色彩暗应用哪个色彩，在 web 开发中，给图形或文字着色会很实用。
  • lighten是哪个色彩浅就体现为哪个色彩，在 web 开发中，给图形或文字着色会很实用。
  • color-dodge色彩减淡混合模式能够用来爱护底图的高光，适宜解决高光下的人物照片。
  • color-burn色彩加深混合模式能够用来爱护底图的暗影，适宜解决幽深秘境一类的照片，通过和特定的色调进行混合，能够营造更加幽深的意境。
  • hard-light的成果是强光，最终的混合成果就如同夺目的聚光灯照耀过去，体现为图像亮的中央更亮，暗的中央更暗。多用在图像体现解决上。
  • soft-light的成果是柔光，最终的混合成果就如同发散的光源洋溢过去，体现成果和 hard-light 有类似之处，只是体现没有那么强烈。给图像着色的时候罕用此混合模式。
  • difference是差值成果，能够实现色彩的反色成果。
  • exclusion的成果是排除，最终的混合成果和 difference 模式是相似的，区别在于 exclusion 的对比度要更低一些。

接下来要介绍的 4 种混合模式都属于色彩系混合模式，在 web 开发中不罕用，还是传统的图像体现解决畛域用的较多。

  • hue示意色调混合，最终的成果是混合后的色彩应用底层元素的亮度和饱和度，而应用下层元素的色调。
  • saturation示意饱和度混合，混合后的色彩保留底图的亮度和色调，应用顶图的饱和度。
  • color示意颜色混合，混合后的色彩保留底图的亮度，应用顶图的色调和饱和度。
  • luminosity示意亮度混合，混合后的色彩保留底图的色调和饱和度，应用顶图的亮度，和 color 模式正好是相同的。

浏览器兼容状况如下所示：

代码开发

今日主图的成果次要就是用到了滤镜 filter 属性中的 contrast 和mix-blend-mode属性中的multiply。

为了达到成果的同时也能浏览文字，所以设置图片的比照图 filter: contrast(60%)。再将整个文本设置相对定位置于图片上方，并设置mix-blend-mode: multiply 即可达到图片所示的成果。外围代码如下所示：

<div>
  <img src="https://xxx.jpeg">
  <p>
  ***
  文本内容
  ***
  </p>
</div>

CSS 代码：

div {
  position: relative; 
  overflow: hidden;
}
img {
  width: 100%;
  filter: contrast(60%);
}
p {
  line-height: 1;
  font-size: 1.76vw;
  color: #fff;
  background: #000;
  mix-blend-mode: multiply;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

通过解决后的下图你能不看源码猜到是哪位明星吗？

最初

今日只用到了 filter 和 mix-blend-mode 的一个属性，还很很多的性能等着你去发现，有趣味的同学能够尝试用起来吧，CSS 的世界等着你来挖掘～ 看完如果感觉有用，记得点个赞再走，珍藏起来说不定哪天就用上啦～

专一前端开发，分享前端相干技术干货，公众号：南城大前端（ID: nanchengfe）

参考

  • mix-blend-mode
  • filter
  • CSS3 混合模式 mix-blend-mode 简介
退出移动版