写在前面
今天我们来练习一个CSS实现的撕纸效果，这个效果，也会在一些设计网站上经常看到，但是这个用PS可以直接做成一张图片，但是，今天我们用CSS通过两张图片就实现了，这样做的好处，就是当我们替换图片时，不需要再通过PS来更改图片，可以直接替换产品图片即可，这样会方便很多。
好了，我们一起来看一下今天练习的项目最终效果：
HTML代码：
<!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>
CSS代码：
*
{
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);
}
写在最后
以上就是今天练习的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
