web-dev-qa-db-ja.com

写真の端に破れた紙の効果を与えることは可能ですか？

アップデート3

こんにちはみんな、私は code （ http://codepen.io/anon/pen/VYRJLp ）を更新しました、そして今、エッジは本当に破れた紙の効果のように見えます。ちなみにSVGを使用しています。

唯一の問題は、svgの背景として画像を作成する方法がわからないことですAT同じ時間に破れた紙のようなエッジが維持されます。

ぜひご覧ください。どんな努力も歓迎します。

アップデート2

PhotoShop（PS）を使わないとこの効果は得られないようですので、ソリューションの一部としてPSを追加したいと思います。

私はPSの専門家ではありませんが、簡単に考えると、実行する必要のある手順がいくつかあると思います。

  • PSを使用して、破れた紙「Shell」を作成します。たとえば、Shell.pngの場合、端にのみ色があり、色は白である必要があります。内側の領域は透明なので、その中に画像を配置できます。
  • 画像の上にShell.pngを配置します。たとえば、banner.jpgを使用します。これは、背景画像としてShellを使用するdivのz-indexを1に設定することを意味します。
  • 別のdivを使用してbanner.jpgを含め、シェルdivの下にz-indexを設定します。

このアプローチに関する質問：

  • レスポンシブですか？

  • そうでない場合、レスポンシブにすることは可能ですか？モバイルデバイスで正しく動作させる必要があるため。

美しくデザインされたウェブサイトを見たのを覚えています。背景に写真があり、この写真の端は破れた紙の効果のように見えます。これは素晴らしいことです。

ここで同様の質問を検索しましたが、回答の効果は原始的であり、非常に単純で頑丈な黒い線であることがわかりました。

私が欲しいもの：

  1. この画像は、レスポンシブを意味するデバイス画面と同じ幅にしたいと思います。
  2. この写真の端は破れた紙のように見えます。
  3. この画像をトップナビゲーションバーの後、コンテンツの前にバナーとして配置します。

この写真の白い領域のように見えるはずです。しかし、私の場合、白い領域を置き換えるために写真を記入する必要があります。

enter image description here

これが私のコードです：注意：このコードでは、cssは画像をエッジとして使用しますが、それは私が望んでいないことです。エッジを純粋なCSS効果にしたいだけです（これは可能ですか？）したがって、次のようになります（右側のもの、白い凹凸のないエッジがないことがわかります） enter image description here

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

更新

こんにちは、みんな、

私が想像しているものと非常によく似たものを見つけたと思います。これが私が望む効果です： enter image description here

htmlcssimagephotoshop
8
Franva

ボーダー画像のスライスを使用して、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で画像を作成しました。基本的に中央が黄色で、次に破れて、外側が透明になっています。

画像のスライスに慣れていない場合は、基本的に4つの数値が（順番に）定義されます。上部の境界ストリップとして使用する画像の上部の高さ（ピクセル単位）、右側のストリップの幅（ピクセル単位）、次に下のストリップ、次に左のストリップ。 fillは、中央部分（デフォルトでは破棄されます）を取得し、それを使用して境界間のdivを埋めるように指示します。

好みに応じて、境界線をrepeat（最後に切り落とす）、round（完全な繰り返しの最も近い数に繰り返します。これは、どの数に応じて圧縮または拡大します）。 ）またはstretch（ストレッチ...に近いですが、この例では画像が歪んでいます）。

正しく動作させるには少し手間がかかりましたが、結果に満足しています。同じ答えの人が見つからなかったので、投稿しようと思いました。

[〜＃〜]更新[〜＃〜]

この機能ISはIE11でサポートされていますborder-style:solidが指定されています。私はメディアクエリを使用して、IE10以下の代替（シャドウなど）を提供します。ここでborder-imageはサポートされていません（私のWebサイトの例）。

12
Lyall

これを試して：

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%);
5
Tymn Urban

あなたはおそらくpng画像でこの効果を達成することができます。

上部は黒（またはヘッダーの色）で、下部は「引き裂かれた効果」を作成するために部分的に透明であり、実際の画像は部分的に非表示になるように下のレイヤー（z-index）にあります。

pdate2への返信これは私が意味したことです

完全なシェル（「正方形」の穴）を作成する代わりに、4つのエッジを上、右、下、左の4つの画像に分割できます。

画像を全長にわたって繰り返すだけでレスポンシブにすることができます（4つのエッジの「開始」と「終了」は同じである必要があります）*

1
oliverpool