本文主要是介绍油墨喷溅（CSS），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
前端小demo_day04_油墨喷溅效果
写在前面
前端练习的第四天(打怪升级ing)，今天实现了一个油墨喷溅的效果，看到这个效果的第一眼的时候，每天都会有一个新的属性收获，一起来实现以下吧
效果展示
需求来源
前端常用css样式实现，作为练习使用
所用到的组件以及知识储备
mix-blend-mode元素的内容和亲父亲的内容和元素的背景混合/*使元素和父元素采用滤色方式融合*/ mix-blend-mode: screen;
实现思路
初始肯定是要给盒子设置初始化样式,其次就是准备一张背景图片和一张油墨喷溅的黑白图,黑白图的原因是滤色之后,有非常棒的效果,其他原因,我也不晓得,没学过
代码展示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>day_004_油墨喷溅特效</title><style>*{width: 0;height: 0;}body{width: 1350px;height: 100%;justify-content: center;align-content: center;display: flex;}#box{position: relative;width: 1000px;height: 618px;background: url("bg_image.jpg") no-repeat;background-size: cover;}#box::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url("effect1.jpg") no-repeat;background-size: cover;mix-blend-mode: screen;}</style>
</head>
<body><div id="box"></div>
</body>
</html>这篇关于油墨喷溅（CSS）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
