是否可以在图片的边缘上产生撕裂的纸张效果

Question

更新3

大家好，我更新了code（http://codepen.io/anon/pen/VYRJLp），现在边缘看起来非常像撕纸效果。它顺便使用SVG。

唯一的问题是我不知道如何将图像作为svg的背景在同一时间保持撕裂的纸状边缘。

请看一下。任何努力都表示赞赏。

---

更新2

如果没有PhotoShop（PS）的帮助，似乎无法实现这种效果，所以我想添加PS作为解决方案的一部分。

我不是PS专家，但是从一个简单的想法，我认为我需要做一些步骤：

• 使用PS制作撕碎的纸张＆＃34; shell＆＃34;，让它说出它的shell.png它 只应在其边缘有颜色，颜色应为白色; 内部区域是透明的，因此我们可以将图片放入 它。
• 将shell.png放在图片的顶部，让我们说banner.jpg，哪个 表示设置使用shell作为其背景的div的z-index 图像为1。
• 使用另一个div来包含banner.jpg并在下面设置z-index shell div。

此方法的问题：

• 是否有回应？

• 如果没有，是否可以使其响应？因为我必须做到这一点 在移动设备上正常工作。

---

我记得我看过一个设计精美的网站，背景中有一张图片，这张照片的边缘看起来像撕纸效果太棒了！

我在这里搜索了类似的问题，但事实证明答案中的效果是原始的，这是非常简单的粗糙黑线。

我想要的是什么：

1. 我希望这张照片与设备屏幕一样宽，这意味着 响应。
2. 这张照片的边缘看起来像撕碎的纸张。
3. 我会将此图片放在顶部导航栏后面 但在内容之前。

它应该看起来像这张照片中的白色区域。但就我而言，我需要填写我的照片来替换白色区域。



这是我的代码： 注意：在这段代码中，css使用图像作为边缘，但是我不想要它。我只是希望边缘是纯粹的CSS效果。（这可能吗？）所以它看起来像这个（右侧的那个，你可以看到没有白色的粗糙边缘）

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

---

更新

大家好，

我想我发现了一些与我想象的非常相似的东西。 这是我想要的效果：

Answer 1

我只使用CSS使用边框图像切片就可以做到这一点。

以下是代码：

body {
    background-image: url("http://s27.postimg.org/7uqejz1sz/mad_scientist.jpg");
}
.border {
  border-width: 20px 0 20px 0;
  border-style:solid;
  border-image: url(http://suck.direct/img/bordernew.png) 50 0 50 0 repeat;
  -webkit-border-image: url(http://suck.direct/img/bordernew.png) 50 0 50 0 repeat;
  -moz-border-image: url(http://suck.direct/img/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，它总是在顶部和底部有撕裂的纸张效果。这对于全宽度来说非常棒，但是我无法找到与顶部和底部同时进行侧边缘的好方法（如果顶部和底部边缘是直的，则容易做侧边缘）。 / p>

我在Photoshop中制作了图像 - 它在中间基本上是黄色的，然后在外面撕裂然后透明。

如果您不熟悉图像切片，则四个数字基本上定义（按顺序）：要用作顶部边框条带的图像顶部的像素高度，以像素为单位的宽度（以像素为单位）右条，然后是底条，然后是左条。 fill告诉它采取中心部分（默认情况下被丢弃）并使用它来填充边界之间的div。

根据您的偏好，您可以设置边框repeat（并在结尾处切断）round（重复到最接近的完整重复次数，这些重复次数可以压缩或拉伸，具体取决于哪个数字它更近）或stretch（伸展......虽然这扭曲了这个例子的图像）。

我需要一些摆弄才能让它正常工作，但我对结果感到满意。我找不到任何有相同答案的人，以为我会发布它。

<强>更新

指定border-style:solid时，IE11支持此功能。我使用媒体查询为IE10及其下方提供了另一种选择（阴影等），其中不支持border-image（例如在我的网站上）。

Answer 2

试试这个：

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

Answer 3

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

顶部应为黑色（或任何头部的颜色），底部部分透明以创建＆＃34;撕裂效果＆＃34;，您的真实图像将位于较低层（z-索引）部分隐藏。

回复Update2 这就是我的意思

您可以将四个边缘分成四个图像：顶部，右侧，底部和左侧，而不是创建一个完整的外壳（一个＆＃34;方形＆＃34;孔）。

您可以通过简单地在整个长度上重复图像来使其响应（＆＃34;开始＆＃34;和＃34;结束＆＃34;四个边缘必须相同） *

Answer 4

我用了一些我发现的笔来想出我自己的解决方案，它的四个边都有裂痕。您可以将其更改为仅在顶部、底部、左侧、右侧或其任意组合上进行撕裂。

关键成分：

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

这不仅会产生阴影，而且阴影遵循裂口的图案，使其看起来更逼真。

实景拍摄：

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