CSS实现的撕纸效果

Phil Arist

已于 2022-10-12 11:31:03 修改

阅读量1.1k

点赞数

分类专栏：前端文章标签： html 前端 css

于 2022-07-11 12:03:17 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41872328/article/details/125718843

版权

前端专栏收录该内容

13 篇文章

订阅专栏

练习一个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);
}

写在最后

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