html - 框内背景图像 HTML、CSS

Question

我目前正在大学里做一个元素。我有一个问题，我有一张图片，我想在上面放一个盒子。它还应该根据图像的轮廓在所有边上填充。我尝试了各种方法但都失败了。谁能举一个 HTML 和 CSS 的例子来帮助我解决这个问题。

Answer 1

将图像分配给一个 div 作为背景图像，并使用 padding 将内部 div 居中。

.inner {
    background-color: blue;
    width: 100%;
    height: 100%
}

.background {
    background-image: url('http://placehold.it/800x600');
    width: 100%;
    background-size: cover;
    height: 300px;
    padding: 50px;
    box-sizing: border-box;
}

http://jsfiddle.net/f4yfju8d/