其他
【每日一练】19—CSS 实现撕纸的效果
写在前面
今天我们来练习一个CSS实现的撕纸效果，这个效果，也会在一些设计网站上经常看到，但是这个用PS可以直接做成一张图片，但是，今天我们用CSS通过两张图片就实现了，这样做的好处，就是当我们替换图片时，不需要再通过PS来更改图片，可以直接替换产品图片即可，这样会方便很多。
好了，我们一起来看一下今天练习的项目最终效果：
<!doctype html><html><head> <meta charset="utf-8"> <title>【每日一练】19—CSS实现撕纸的效果</title></head><body> <section> <div class="bg"></div> <div class="paper"></div> </section></body></html>*{ margin: 0; padding: 0; box-sizing: border-box;}section { position: relative; width: 100%; height: 100vh;}.bg { position: absolute; width: 100%; height: 100vh; background: url(bg.jpg); background-size: cover; background-position: center;}.paper { position: absolute; width: 100%; height: 100vh; background: url(paper.jpg); background-size: cover; background-position: center; mix-blend-mode: lighten; filter: brightness(1.1);}写在最后
以上就是今天练习的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号