Как сделать фон DIV сплошным цветом, с img как границей?

Question

У меня есть div в центре моей страницы, что я хотел бы иметь белый фон в центре, а затем, скажем, вы взяли 10 пикселей вокруг всех краев изображения соответствующего размера и поместили его по краям белого цвета, так что в основном его белый фон, но с полноразмерным изображением, показывающим только внешний 10px.

Все, что я пробовал с семейством свойств border-image, похоже, не делает то, что я хочу, оно только помещает изображение, которое я хочу в каждом углу того, что будет границей.

Благодарим за помощь!

Answer 1

Вы должны положить div в div. Первый div больше, его фон - ваша фотография, и у него есть padding = 10px. Второй - меньше и содержит белый фон.

Answer 2

Вы можете сделать div с положением relative и поместить в него свое изображение. Во-вторых, поместите маску в псевдо :before или :after и дайте ей положение absolute с top/right/bottom/left равных друг другу, таких как 60px и стиль.

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>