如何创建溢出固定高度背景图像的内容区域？

Question

这个问题一直让我发疯。

我正在尝试创建一个博客区域，该区域溢出固定高度的背景图像。

我什至还没有创造出这个东西，我希望在起点上有所帮助。以下2个选项中的哪个可以用来实现我想要的结果：

选项1：：一个包含2个DIV的DIV； 1表示背景图片，1表示博客区域。这样，容器DIV可以透明显示在页面背景中，例如

<div>

    <div style="background-image: url('{{.imageUrl}}')>
    </div>

    <div class="blog" style="background-color:blue">
    </div>

</div>

选项2：具有背景图像的DIV，该背景图像包含博客区域，但是背景图像的高度是固定的，因此，如果博客区域扩展到超出图像高度，则div图片下方是透明的。

    <div style="background-image: url('{{.imageUrl}}')>

        <div class="blog" style="background-color:blue">
        </div>

    </div>

我感谢上面包含的CSS缺少许多样式属性，例如边距，位置等，但是到此为止，我尝试了太多组合，但失败了，我想了解的就是我应该选择选项1还是选择选项2

Answer 1

<style>
    .parent{position: relative;}
    .parent:before {
        background: url(image);
        content: '';
        width: 100%;
        height: 400px;
        position: absolute;
    }
    .blog{
        background-color: blue;
        width: 80%;
        height: 200px;
        margin: auto;
     }
</style>
<div class="parent">
    <div class="blog" style="background-color:blue">
    </div>    
</div>

Answer 2

将background-image添加到wrap div并设置margin/padding

.blog{
 background-color:blue;
 width:400px;
 margin-left: 52px;
 height: 650px;
}
.wrap{
 background-image: url("https://material.angular.io/assets/img/examples/shiba1.jpg");
 background-repeat: no-repeat;
 height:500px;
 padding-top:50px;
}

<div class="wrap">
  <div class="blog">
  here is my blog 
   </div>
  <div class="other">
  here is other content 
   </div>
</div>