CSS实现的撕纸效果

练习一个CSS实现的撕纸效果，这个效果，也会在一些设计网站上经常看到，但是这个用PS可以直接做成一张图片，但是，今天我们用CSS通过两张图片就实现了，这样做的好处，就是当我们替换图片时，不需要再通过PS来更改图片，可以直接替换产品图片即可，这样会方便很多。

好了，我们一起来看一下今天练习的项目最终效果：

HTML代码：

  
  【每日一练】19—CSS实现撕纸的效果


  
    

    

  

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);
}

写在最后

以上就是练习的全部内容，希望这个小练习对你有用