是否有可能在图片的边缘造成撕纸效果？ [英] Is it possible to make a torn paper effect on edges of a picture
问题描述
更新3
大家好，我更新了 code （ 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。
此方法的问题：
-
是否有反应？
有可能使其响应？因为我必须让它
在移动设备上正常工作。
我记得我看到一个设计精美的网站，背景中有一张照片，这张照片的边缘看起来像撕纸效果，太棒了！
我在这里搜索了类似的问题，但事实证明，答案中的效果是原始的，这是非常简单的黑色粗线。
我想要的：
- 我希望这张图片的宽度与设备屏幕一样宽，这意味着
的响应。 - 这张图片的边缘看起来像撕碎的纸张。
- 我将这张图片作为横幅放在顶部导航栏
之后，但放在内容之前。
它应该看起来像这张图片中的白色区域。但在我的情况下，我需要填写我的照片来取代白色区域。
这里是我的代码：
注意：在这段代码中，css使用一个图像作为边缘，但不是我想要的。我只是希望边缘是纯粹的CSS效果（这是可能的吗？）所以它看起来像这样（右边的一个，你可以看到没有白色粗糙的边缘）
< div class =row>
< div id =letterclass =col-lg-12 col-md-12 col-sm-12 col-xs-12>
< / div>
< / div>
#letter {/ *破纸边框* /
height：450px;
职位：亲属;
top：0;
bottom：0;
剩下：0;
right：0;
background-image：url（'img / background.jpg'）;
background-size：cover;
不透明度：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重复;
-webkit-border-image：url（'http://news.unchealthcare.org/images/backgrounds/paper.jpg'）80 80 80重复;
-o-border-image：url（'http://news.unchealthcare.org/images/backgrounds/paper.jpg'）80 80 80重复;
border-image：url（'http://news.unchealthcare.org/images/backgrounds/paper.jpg'）80 80 80重复;
更新
大家好，
我想我发现了一些与我想象的很相似的东西。
这是我想要的效果：
这里只用CSS就可以做到这一点。代码：
body {background-image：url（http://s27.postimg.org/7uqejz1sz/mad_scientist.jpg） ;}。border {border-width：20px 0 20px 0;边框样式：固体; 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;宽度：100％; height：60px;}。p {font-weight：bold; font-family：'Segoe UI'，Tahoma，Geneva，Verdana，sans-serif;}
< div class =borderstyle =text-align：center;> < br /> < span class =p>即将推出...< / span> < br /> < / div>
我是一个高度重新调整大小的div，它总是沿着顶部和底部具有撕裂的纸张效果。对于全宽来说非常棒，但我无法找到一种像顶部和底部同时做侧边的体面方式（如果顶部和底部边缘是直的，容易做侧边）。
我在Photoshop中制作了图片 - 它基本上是中间的黄色，然后在外部撕开然后透明。
如果您对图像切片不熟悉，则四个数字基本上定义（按顺序）：要用作顶部边框的图像顶部的像素高度，右侧的像素宽度然后是底部条，然后是左侧条。 fill 指示它取中间部分（默认放弃），并用它填充边界之间的div。
根据您的喜好，您可以使用边界重复（并在结尾处截断）， round （重复到最近的完整重复次数，压缩或拉伸取决于它接近的数字）还是 stretch >（延伸...虽然这扭曲了这个例子的形象）。
我花了一些时间来让它正常工作，但是我对结果很满意。
更新
$我找不到任何具有相同答案的人b $ b
IE11支持此功能，只要指定 border-image 不受支持（例如在我的网站上）。
Update 3
Hi guys, I updated the code (http://codepen.io/anon/pen/VYRJLp) and now the edges look really like torn paper effect. It uses SVG by the way.
The Only problem is I don't know how to make the image as the background of the svg AT THE SAME TIME maintain the torn-paper-like edges.
Please have a look it. Any efforts are appreciated.
Update 2
It seems that it is impossible to achieve this effect without the help of PhotoShop(PS), so I would like to add PS as a part of solution.
I am not a PS expert, but from a quick thought, I think there are a few steps I need to do:
- Use PS to create a torn paper "shell", let's say it's shell.png It should only have color on its edges and the color should be white; the inner area is transparent, so that we can place the picture in it.
- Place shell.png on top of the picture, let's say banner.jpg, which means set the z-index of the div which uses shell as its background image to 1.
- Use another div to contain the banner.jpg and set the z-index below the shell div.
Questions for this approach:
Is it responsive?
If not, is it possible to make it responsive? As I have to make it work properly on mobile devices.
I remember that I saw a beautifully designed website, there is a picture in the background and the edges of this picture look like torn paper effect which is fantastic!
I searched the similar questions here but it turns out that the effects in the answers are primitive, which are very simple rugged black lines.
What I want:
- I want this picture to be as wide as the device screen which means responsive.
- The edges of this picture look like torn paper.
- I will place this picture as a banner after the Top Navigation bar but before the content.
It should look like the white area in this picture. But in my case, I will need to fill in my picture to replace the white area.
Here is my code: Notice: in this code, the css uses an image as the edge, BUT that is not want I want. I just want the edges to be pure CSS effects.(Is this possible?) So it will look like this one(the one on the right side, you can see that there is no white rugged edges)
<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;
}
Update
Hi guys,
I think I found something quite similar to what I am imagine. Here is the effect I want :
I was able to do this with just CSS using border image slicing.
Here's the code:
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>
This gives me a height re-sizing div that always has the torn paper effect along the top and bottom. It's great for full width, but I wasn't able to figure out a decent way of doing the side edges at the same time as the top and bottom (easy to do the side edges if the top and bottom edges are straight).
I made the image in Photoshop - it's basically yellow in the middle, then torn and then transparent on the outer.
If you're not familiar with image slicing, the four numbers basically define (in order): the height in pixels of the top of the image that you want to use as the top border strip, the width in pixels for the right strip, then the bottom strip, then the left strip. The fill tells it to take the center part (which is discarded by default) and use it to fill the div between the borders.
Depending on your preferences you can have the border repeat (and get cut off at the end), round (repeat to the nearest number of full repetitions, which either compresses or stretches depending on which number it is nearer to) or stretch (stretches... although that distorts the image for this example).
It took some fiddling for me to get it to work correctly but I'm chuffed with the results. I couldn't find anyone with the same answer so thought I'd post it.
UPDATE
This feature IS supported in IE11 provided border-style:solid is specified. I use media queries to provide an alternative (shadows etc.) for IE10 and below where border-image is not supported (example on my website).
这篇关于是否有可能在图片的边缘造成撕纸效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
