嗨伙计们,我更新了code(http://codepen.io/anon/pen/VYRJLp),现在边缘看起来非常像撕纸效果.它顺便使用SVG.
唯一的问题是我不知道如何使图像作为svg的背景在同一时间保持撕纸样的边缘.
请看看吧.任何努力都表示赞赏.
更新2
没有PhotoShop(PS)的帮助,似乎不可能实现这种效果,所以我想添加PS作为解决方案的一部分.
我不是PS专家,但是从一个简单的想法,我认为我需要做的几个步骤：
>使用PS创建一个撕裂的纸“shell”,让我们说它是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="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;
}
更新
嗨,大家好,
我想我发现了一些与我想象的非常相似的东西.
这是我想要的效果：
解决方法
这是代码：
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,它总是在顶部和底部有撕裂的纸张效果.这对于全宽度来说非常棒,但是我无法找到与顶部和底部同时进行侧边的好方法(如果顶部和底部边缘是直的,则容易做侧边缘).
我在Photoshop中制作了图像 – 它在中间基本上是黄色的,然后在外面撕裂然后透明.
如果您不熟悉图像切片,则四个数字基本上定义(按顺序)：要用作顶部边框条带的图像顶部的像素高度,右边条带的宽度(以像素为单位),然后是底部条带,然后是左侧条带.填充告诉它采取中心部分(默认情况下被丢弃)并使用它来填充边框之间的div.
根据您的喜好,您可以重复边框(并在结尾处切断),圆形(重复到最接近的完整重复次数,根据接近的数字压缩或拉伸)或拉伸(拉伸). ..虽然这扭曲了这个例子的图像).
为了让它正常工作,我花了一些小事,但我对结果感到满意.我找不到任何有相同答案的人,以为我会发布它.
UPDATE
IE11支持此功能,提供border-style：solid指定.我使用媒体查询为IE10及其下方提供替代(阴影等),不支持border-image(例如在我的网站上).
