【每日一练】19—CSS 实现撕纸的效果
web前端开发
共 1045字，需浏览 3分钟
·
2022-07-05 06:35
写在前面
今天我们来练习一个CSS实现的撕纸效果，这个效果，也会在一些设计网站上经常看到，但是这个用PS可以直接做成一张图片，但是，今天我们用CSS通过两张图片就实现了，这样做的好处，就是当我们替换图片时，不需要再通过PS来更改图片，可以直接替换产品图片即可，这样会方便很多。
好了，我们一起来看一下今天练习的项目最终效果：
<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);}
写在最后
以上就是今天练习的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号
评论