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

Question

更新3

大家好,我更新了代码(http://codepen.io/anon/pen/VYRJLp),现在边缘看起来真的像撕纸效果.它顺便使用SVG.

唯一的问题是我不知道如何使图像作为同一时间的svg的背景保持撕纸样边缘.

请看看吧.任何努力都表示赞赏.

---

更新2

没有PhotoShop(PS)的帮助,似乎无法实现这种效果,所以我想添加PS作为解决方案的一部分.

我不是PS专家,但是从一个简单的想法,我认为我需要做的几个步骤:

• 使用PS创建一个撕裂的纸"shell",让我们说它是shell.png它的边缘应该只有颜色,颜色应该是白色; 内部区域是透明的,因此我们可以将图片放入其中.
• 把shell.png放在图片的顶部,让我们说banner.jpg,这意味着设置div的z-index,它使用shell作为背景图像为1.
• 使用另一个div来包含banner.jpg并在shell div下面设置z-index.

这种方法的问题:

• 它是否有响应？

• 如果没有,是否可以使其响应？因为我必须让它在移动设备上正常工作.

---

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

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

我想要的是:

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("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告诉它采取的中心部分(这是默认丢弃),并使用它来填充边界之间的股利.

根据您的喜好,您可以拥有边框repeat(并在结尾处切断),round(重复到最接近的完整重复次数,根据接近的数字进行压缩或拉伸)或stretch(拉伸...虽然这扭曲了这个例子的图像).

为了让它正常工作,我花了一些小事,但我对结果感到满意.我找不到任何有相同答案的人,以为我会发布它.

UPDATE

border-style:solid指定了IE11中支持的此功能.我使用媒体查询为IE10及以下提供替代(阴影等)border-image不支持的地方(例如在我的网站上).

Answer 2

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

\n

关键成分：

\n

\n
1. 用于clip-path: polygon(\xe2\x80\xa6)“剪切”您想要具有撕裂效果的对象。
\n
2. 用filter: drop-shadow(\xe2\x80\xa6)在容器上可以给物体留下阴影。
\n

\n

这不仅会产生阴影，而且阴影会遵循撕裂的图案，因此看起来更真实。

\n

现场录制：

\n

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

\n

Answer 3

尝试这个：

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 4

您或许可以使用 png 图像来实现这种效果。

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

回复Update2 这就是我的意思

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

您只需在整个长度上重复图像即可使其响应（四个边缘的“开始”和“结束”必须相同）*