能否在图片边缘制作撕裂纸张的效果？

Question

能否在图片边缘制作撕裂纸张的效果？

htmlcssimagephotoshop

10

更新 3

我更新了代码 (http://codepen.io/anon/pen/VYRJLp)，现在边缘看起来真的像撕裂纸张效果。顺便说一下，它使用的是SVG。

唯一的问题是，我不知道如何使图像作为svg的背景，同时保持撕裂纸张般的边缘。

请查看一下。非常感谢您的任何帮助。

更新 2

似乎无法在没有Photoshop（PS）的帮助下实现这种效果，因此我想将PS添加为解决方案的一部分。

虽然我不是PS专家，但经过简单的思考，我认为需要进行以下几个步骤：

使用PS创建一个撕裂纸张“外壳”，假设它是shell.png。它只应该有其边缘的颜色，颜色应为白色；内部区域应该是透明的，这样我们就可以把图片放在里面。
将shell.png放在图像banner.jpg的上方，这意味着将使用shell作为其背景图像的div的z-index设置为1。
使用另一个div来包含banner.jpg，并将z-index设置在shell div下面。

这种方法的问题：

它是否具有响应性？
如果没有，是否有可能使其具有响应性？因为我必须使其在移动设备上正常工作。

我记得看到过一个设计精美的网站，其中有一张图片作为背景，其边缘看起来像是撕裂纸张效果，非常棒！

我在这里搜索了类似的问题，但答案中的效果都很原始，只是简单的崎岖黑色线条。

我想要：

我希望这张图片能够占据整个设备屏幕的宽度，即具有响应性。
这张图片的边缘看起来像是撕裂的纸张。
我会将这张图片放置在顶部导航栏之后，内容之前作为横幅。

它应该看起来像这张图片中的白色区域。但在我的情况下，我需要用我的图片填充白色区域。

enter image description here

这是我的代码：注意：在此代码中，CSS使用图像作为边缘，但这不是我想要的。我只想让边缘成为纯CSS效果。（是否可能？），因此它将看起来像右侧的图片，您可以看到没有白色崎岖边缘） enter image description here

<div class="row">
    <div id="letter" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

    </div>
</div>

#letter { /*torn paper border*/
    height:450px;
    position:relative;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-image:url('img/background.jpg');
    background-size:cover;
    opacity:0.8;
    border-style: solid; 
    border-width: 40px 40px 40px; 
       -moz-border-image: url('http://news.unchealthcare.org/images/backgrounds/paper.jpg') 80 80 80 repeat; 
    -webkit-border-image: url('http://news.unchealthcare.org/images/backgrounds/paper.jpg') 80 80 80 repeat; 
         -o-border-image: url('http://news.unchealthcare.org/images/backgrounds/paper.jpg') 80 80 80 repeat; 
            border-image: url('http://news.unchealthcare.org/images/backgrounds/paper.jpg') 80 80 80 repeat;
}

更新

我想我找到了与我所想象的非常相似的东西。这就是我想要的效果：输入图片说明

- Franva

1

也许这个代码笔可以帮到你：http://codepen.io/chipChocolate/pen/yyaGWx - web-tiki

嗨@web-tiki，感谢您的帮助，但它看起来更像是侵蚀而不是撕裂纸张的边缘。 - Franva

嗨@web-tiki，我再次查看了效果，发现它非常接近我想要的效果。唯一破坏整个效果的是所有撕裂边缘都在一条线上清晰地结束。因此，如果我们能够去掉那条线，那么它看起来就像真正的撕裂纸张效果。你有什么想法吗？ - Franva

嗨@Web-tiki，我使用了您提供的笔并进行了调整，现在它看起来非常类似于撕裂的纸张。请查看更新3。谢谢。 - Franva

3

没有背景图片的纯CSS版本。 - Dzmitry Lahoda

显示剩余5条评论

4个回答

8

尝试这个:

clip-path: polygon(3% 0, 7% 1%, 11% 0%, 16% 2%, 20% 0, 23% 2%, 28% 2%, 32% 1%, 35% 1%, 39% 3%, 41% 1%, 45% 0%, 47% 2%, 50% 2%, 53% 0, 58% 2%, 60% 2%, 63% 1%, 65% 0%, 67% 2%, 69% 2%, 73% 1%, 76% 1%, 79% 0, 82% 1%, 85% 0, 87% 1%, 89% 0, 92% 1%, 96% 0, 98% 3%, 99% 3%, 99% 6%, 100% 11%, 98% 15%, 100% 21%, 99% 28%, 100% 32%, 99% 35%, 99% 40%, 100% 43%, 99% 48%, 100% 53%, 100% 57%, 99% 60%, 100% 64%, 100% 68%, 99% 72%, 100% 75%, 100% 79%, 99% 83%, 100% 86%, 100% 90%, 99% 94%, 99% 98%, 95% 99%, 92% 99%, 89% 100%, 86% 99%, 83% 100%, 77% 99%, 72% 100%, 66% 98%, 62% 100%, 59% 99%, 54% 99%, 49% 100%, 46% 98%, 43% 100%, 40% 98%, 38% 100%, 35% 99%, 31% 100%, 28% 99%, 25% 99%, 22% 100%, 19% 99%, 16% 100%, 13% 99%, 10% 99%, 7% 100%, 4% 99%, 2% 97%, 1% 97%, 0% 94%, 1% 89%, 0% 84%, 1% 81%, 0 76%, 0 71%, 1% 66%, 0% 64%, 0% 61%, 0% 59%, 1% 54%, 0% 49%, 1% 45%, 0% 40%, 1% 37%, 0% 34%, 1% 29%, 0% 23%, 2% 20%, 1% 17%, 1% 13%, 0 10%, 1% 6%, 1% 3%);

- Tymn Urban

可悲的是，一旦你意识到Edge（当然）不支持这个功能，你就会发现这变得有点困难了，你必须在SVG内部使用clip-path才能使其正常工作。 - Highspeed

7

我用一些找到的笔来构思我的解决方案，使其四面都有撕裂效果。您可以将其更改为仅在顶部、底部、左侧、右侧或任意组合上具有撕裂效果。

关键要素：

使用clip-path: polygon(…)来“切割”您想要产生撕裂效果的对象。
在容器上使用filter: drop-shadow(…)来使物体产生阴影。

这不仅给出了阴影，而且阴影跟随着撕裂的图案，使其看起来更加逼真。

现场演示:

https://codepen.io/carterpape/pen/rNjJKbM

- Carter Pape

哇，6年过去了，这个问题仍然受到很多喜爱！太棒了！ :) 我查看了你的解决方案，效果看起来非常好！感谢分享！ - Franva

你是如何生成那些长路径的？你不可能手动输入，对吧？ - Franva

1

您可能可以通过使用png图像实现此效果。

顶部应该是黑色的（或者您的页眉颜色），底部是部分透明的，以创建“撕裂效果”，您真正的图像将位于较低层（z-index）并部分隐藏。

更新2的回复这就是我所说的意思

不要创建完整的外壳（“方形”孔），您可以将四个边缘分成四个图像：顶部、右侧、底部和左侧。

您可以通过简单地在整个长度上重复图像（四条边的“起点”和“终点”必须相同）使其灵活响应。

- oliverpool

1

谢谢Oliver，你能提供一个演示吗？ - Franva

嗨@web-tiki，我使用了您提供的笔并进行了调整，现在它看起来非常类似于撕裂的纸张。请查看更新3。谢谢。 - Franva

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lyall · Accepted Answer

我可以使用CSS中的边框图像切片来完成这个操作。

以下是代码：

```css border-image-slice: 1; ```

```html

这是代码：

```

body {
    background-image: url("https://i.postimg.cc/jdRfmPxv/1-2-OKX1nhs-Z3-CB2-Cid-Edh-Jw.png");
}
.border {
  border-width: 20px 0 20px 0;
  border-style:solid;
  border-image: url(https://i.postimg.cc/DZYqPDTD/bordernew.png) 50 0 50 0 repeat;
  -webkit-border-image: url(https://i.postimg.cc/DZYqPDTD/bordernew.png) 50 0 50 0 repeat;
  -moz-border-image: url(https://i.postimg.cc/DZYqPDTD/bordernew.png) 50 0 50 0 repeat;
  border-image-slice: 50 0 50 0 fill;
  border-image-width: 20 0 20 0;
  width: 100%;
  height: 60px;
}
.p {
  font-weight: bold;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

<div class="border" style="text-align:center;">
  <br />
  <span class="p">Coming soon...</span>
  <br />
  <br />
</div>

这个代码可以让我得到一个高度可调整的 div，总是具有上下两端的撕纸效果。它非常适合全屏宽度，但我无法找到一种好的方法来同时实现边缘和上下两端的效果（如果上下两端是直的，则很容易实现边缘效果）。

我在 Photoshop 中制作了这张图片 - 它基本上是中间是黄色的，然后是撕裂的，最外层是透明的。

如果您不熟悉图像分割，这四个数字基本上按顺序定义：您要将其用作顶部边框条的像素高度，右侧条的像素宽度，然后是底部条和左侧条。 fill 告诉它采用中心部分（默认情况下被丢弃）并用它来填充边框之间的 div。

根据您的喜好，您可以使边框 repeat（并在末尾被截断），round（重复到最近的完整重复次数，这会压缩或拉伸，具体取决于哪个数字更接近）或 stretch（拉伸...虽然这会扭曲此示例的图像）。

我花了一些时间才找到正确的方法，但最终结果让我很满意。我找不到任何和我答案相同的人，所以我决定发布它。

更新

在IE11中，此功能受到支持，只要指定border-style:solid。对于IE10及以下版本不支持border-image，我使用媒体查询提供替代方案（如阴影等）。（例如在我的网站上）。

更新 04/2020

现在是2020年，距离我最初的回答已经过去几年了（我学到了很多）。我最近在木制手表等其他项目上使用了更简单的方法。我找到要应用边框的div，并使用：before或：after添加下边框，如下所示。同样，这次我在Photoshop中制作的图像是白色>撕裂边缘>透明而不是彩色的。

要添加到底部：

.targetdivclass:after{
     content:" ";
     display:block;
     height: 45px;
     background-image:url('https://ecorelos.com/wp-content/uploads/2020/04/torn-border2.png');
     position:absolute;
     bottom:-15px;
    width:300%;
left:-500px;    
}

要将图像添加到顶部（请注意，除非您想在CSS中进行转换/旋转，否则需要图像的翻转版本）：

    .targetdivclass:before{
        content:" ";
     display:block;
     width:300%;
     height: 65px;
     background-image:url('https://ecorelos.com/wp-content/uploads/2020/04/torn-border2upside.png');
     position:absolute;
     margin-top:-80px;
     left:-500px;
       z-index:1;
}

请将以下内容翻译为中文：

调整 height, bottom, width 和 left 以适应图片和网站。请注意，如果您将其应用于页脚，则可能会导致宽度大于100％的问题，在这种情况下，您需要将 left 设为零。

这是响应式的，但如果需要，您可以使用媒体查询指定移动设备的不同大小和边距。

结果是与最初请求的相同效果：