これを画像の境界線に正しく挿入するにはどうすればよいですか？

このプログラム的か写真かはわかりませんので、私はここに掲載しています。私はこれを他の場所に投稿しなければならないと謝罪します。これを画像の境界線に正しく挿入するにはどうすればよいですか？

とにかく、私はこの画像を使用して素敵な境界線を作るためにborder-imageプロパティを使用しようとしている：

しかし、それは本当に私と一緒に働いていません。私は奇妙な服従をしている。

#div{ 
 
     -webkit-border-image: url("http://i.imgur.com/BL9Mb7a.gif") 30 repeat; /* Safari 3.1-5 */ 
 
     -o-border-image: url("http://i.imgur.com/BL9Mb7a.gif") 30 repeat; /* Opera 11-12.1 */ 
 
     border-image: url("http://i.imgur.com/BL9Mb7a.gif") 30 repeat; 
 
    \t border-width: 100px; 
 
    \t border-style: solid; 
 
    \t height: 200px; 
 
    \t width: 100px; 
 
    }

<body> 
 
    <div id="div">Hello world!!!</div> 
 
    </body>

JSFiddle

だから、私はこれを修正するためのいくつかのヒントを必要とする：ここに私のコードです。幅が定義されないこと

注：結果は、このような何か（未正確に、同様）を消す必要があります。拡張可能です

画像の中央部分を繰り返してエッジを残しておく必要があります。しかし、私は新生児の描写の結果を得ています。だから、これのためのヒントや解決策はありますか？私は研究をしましたが、私の欲望は含まれていません。

出典

2016-06-25 Ab_

http://www.w3schools.com/cssref/css3_pr_border-image.aspは便利なリンクですか？ –

あなたは 'border-image：url（" http://i.imgur.com/BL9Mb7a.gif "）20％round;'を試してみてください。 –

@ GeoffJamesありがとう、しかし私はすでにそれを見た。 –

問題は、境界線に使用している画像です。使用しているイメージは、境界線の各セクションに分割されています。 border-imageは、イメージを撮り、それを周囲に並べるようには設計されていません。それは中心があなたのdivエリアである9つのセクション（チック - タック - トゥボードと思う）に分割されるように設計されています。

今画像の各スライスは、側面があなたの場合のように、繰り返すことができるあなたのそれぞれの境界線に適用されるようにしようとしています。 CSS-Tricksにはこれに関する素晴らしいページがあります。

これを修正する方法の1つは、自分でイメージを編集してから自分のボーダーを設定することです。コピー貼り付けと回転。こうすることで、CSSで適切なセクションをスライスすることができます。

出典

2016-06-26 01:43:10

ありがとうございますが、私はすでに自分の問題を解決しましたが、この情報は他のユーザーにとっても役立ちます。 –

どうやって解決しましたか？ –

あなたが言ったように私の国境を作ることによって：https://s32.postimg.org/rfht7aqx1/border.png –

これを画像の境界線に正しく挿入するにはどうすればよいですか？

答えて

関連する問題