DIVの背景を無地の色にするには、imgを境界線として使用しますか？

Question

私はページの中央にdivを持っていて、中央に白い背景がありたいと思っています。そして、適切に大きさのある画像のすべての端を10px取り、基本的には白い背景ですが、フルサイズの画像は外側から10pxだけで表示されます。

私がborder-imageプロパティファミリで試したことはすべて、私が望むことをしているように見えるだけで、境界線となるすべての角に必要な画像しか置いていません。

ありがとうございました！

Answer 1

divにdivを入れる必要があります。最初のdivは大きく、彼の背景はあなたの写真であり、パディング= 10pxを持っています。 2番目のものは小さく、白い背景が含まれています。

Answer 2

位置がrelativeのdivを作成し、その中に画像を置くことができます。次に、マスクを擬似:beforeまたは:afterに入れて、/right/bottom/leftと60pxなどの等しい位置にabsoluteの位置を付け、スタイルを付けます。

div { 
 
    width: 400px; 
 
    height: 400px; 
 
    background-image: url(http://placehold.it/400x400/4aa3df); 
 
    background-size: cover; 
 
    position: relative 
 
} 
 

 
div:before { 
 
    content:''; 
 
    position: absolute; 
 
    display: inline-block; 
 
    top: 60px; 
 
    left: 60px; 
 
    right: 60px; 
 
    bottom: 60px; 
 
    background-color: #eee; 
 
    z-index: 9999 
 
}

<div></div>

Answer 3

背景クリップ+パディングまたは境界または両方が無地色を描画する勾配で行う必要があります

https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

body, p , div { 
 
    background:linear-gradient(white,white), url(http://lorempixel.com/300/300/abstract/10) center; 
 
/* background-size:auto auto,cover;*/ 
 
    background-clip : content-box, border-box; 
 
    margin:1em; 
 
    padding:1em; 
 
    box-shadow:0 0 0 3px, inset 0 0 0 3px red ;/* borders needs to be used for demo, this fakes one outside and inside */ 
 
    min-height:30px; 
 
    text-align:center; 
 
    } 
 
p { 
 
    padding:0; 
 
    
 
    border:solid 1em transparent 
 
    } 
 
body { 
 
    
 
    border:solid 1em transparent 
 
    } 
 
html { 
 
    background:gray;

body: 1em padding + 1em border. <b>Notice where stands inset red shadow in containers</b> 
 
<div>div: 1em padding </div> 
 
<p>p: 1em border</p>