撕纸效果与css面具

iecba09b 于 2023-03-09 发布在其他

关注(0)|答案(1)|浏览(167)

我试着用css蒙版实现一些撕纸/线纸的效果。它实际上工作得很好，看起来也不错。我不能实现的是，如果我也想在顶部的蒙版。所以这里是我尝试到目前为止：

mask-image: linear-gradient(white, white), url("https://www.isorauschen.at/ripped-paper.svg"), url("https://www.isorauschen.at/ripped-paper-mirrored.svg");
mask-position: bottom, top;
mask-repeat: repeat-x, repeat-x;
mask-size: 400px auto, 400px auto;

也许有更好的方法来完成这一点。我选择蒙版是因为它也会剪辑所有的背景和其他线条。
x一个一个一个一个x一个一个二个x

css

来源：https://stackoverflow.com/questions/75671911/ripped-paper-effect-with-css-mask

1条答案

按热度按时间

drnojrws1#

更新你的代码如下。为了演示的缘故，我只显示掩码。我也使用随机PNG图像，因为你的SNG将不会在代码片段中工作，由于一些CORS问题。
注意50px的使用，该值允许您控制撕裂效果的大小

.box{
   width: 400px;
   height: 600px;
   background-color: red;
   -webkit-mask: 
     url('https://i.ibb.co/7RW8C9t/top.png') /*url("https://www.isorauschen.at/ripped-paper.svg")*/
       top   /auto 50px repeat-x,
     linear-gradient(white, white) no-repeat
       center/100% calc(100% - 2*50px),
     url('https://i.ibb.co/5WvbqgG/zmylJ.png') /* url("https://www.isorauschen.at/ripped-paper-mirrored.svg")*/
      bottom/auto 50px repeat-x;
}

<div class="box">

</div>

赞(0）回复(0）举报 2023-03-09

我来回答

撕纸效果与css面具

1条答案

相关问题

热门标签

最新问答