1

セクションの境界線として使用したい png ファイル (1603px x 75px) があります。しかし、外側ではなく内側（挿入図）に表示したいと思います。しかし、画像の垂直方向の寸法を変形せずに、境界画像を正確に画像の高さの内側 (挿入) にする方法を理解できません。

html:

    <section class="intro viewportheight_min" id="intro">

css:

body, html, .container, section {
  height: 100%;
}
/*.container{margin:0 auto;}*/
section {
    width:100%;
    text-align:center;
}
section.intro {
/*  border-color:#06b4c8;*/
/*  border-style:solid;*/
/*  border-width:0 0 75px 0;*/
/*  -moz-box-sizing: border-box;*/
    padding-top: 1%;
    border-style: solid; 
    border-width: 0px 0px 75px 0px;
    -moz-border-image: url(../img/vague.png) 0 0 75 stretch;
    -webkit-border-image: url(../img/vague.png) 0 0 75 stretch; 
    -o-border-image: url(../img/vague.png) 0 0 75 stretch; 
    border-image: url(../img/vague.png) 0 0 70 fill stretch; 
}
4

1 に答える 1

2

ルールにbox-sizing: border-box;プロパティを追加してみてください:section.intro

section.intro {
    ...
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

http://jsfiddle.net/VL5Gw/

于 2013-11-08T14:28:30.997 に答える