相关疑难解决方法(0)

更新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 …