1

http://bootply.com/89567

にパターンを添付しました。そのための特定のセレクターborder-bottomがないため、以前はそれを添付していました。ただし、画像は残りの部分に合わせて拡大縮小されません。borde-image:after

キャンバスでボーダーパターンを作成する必要がありますか？どうすればそれを達成できますか？

前もって感謝します

.redbrd {
    height: 400px;
    width: auto;
    background: #D20000;
}

.redbrd:after {
    content: url("http://i.imgur.com/iKXPOF0.png");
    position: relative;
    top: 400px;
}


<section class="col-md-12">
                <div class="row">
                    <article class="col-md-6">

                    </article>

                    <article class="col-md-6">
                            <div class="col-md-6 col-xs-6">
                                <div class="redbrd"></div>
                            </div>
                            <div class="col-md-6 col-xs-6">
                                <div class="redbrd"></div>
                            </div>
                    </article>
                </div>
            </section>
4

2 に答える 2

0

div に border-image プロパティを追加できます。そして、下の境界線を除くすべての境界線を無効にします。例えば：

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
border-top:0px;
border-left:0px;
border-right:0px;

}

またはこれを試してください

 div
  {
      border-image-slice: 0 0 27 0; border-image-width: 20px 20px 20px 20px; 
      border-image-      outset: 0px 0px 0px 0px; border-image-repeat: stretch stretch;
     border-image-source: url("https://mdn.mozillademos.org/files/6007/border-image-1.png");
        }

このリンクが役立つと思いますhttps://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Border-image_generator 。

于 2013-10-23T12:32:11.290 に答える
0

これを試して：

.redbrd:after {
     content: " ";
     position: relative;
     top: 400px;
     display: block;
     background: url("http://i.imgur.com/iKXPOF0.png") repeat-x;
     height: 30px;
}
于 2013-10-23T12:32:14.413 に答える