图像顶部的透明框中的文字？

Question

我在背景图片上创建透明框时遇到问题，例如this。我的代码几乎完全相同，但由于某些原因，我无法让透明框移开图像的顶部（我希望框中心有一些上下边距）。添加填充：20px到.background什么都不做;添加保证金：20px到#transbox只会使左右边距增加20px，但对顶部和底部边距没有任何作用。

HTML＆amp; CSS：

.background {
  background-image: url("https://source.unsplash.com/5OMTuqOM7bI");
}
#transbox {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  margin: 60px;
}
h3 {
  text-align: center;
  font-weight: 300;
  color: #3C5FA3;
}
.container {
  width: 80%;
  margin: 0 auto;
  padding: 0 30px;
}
.clearfix:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
}

<div class="container clearfix background">
  <div id="transbox">
    <h3>Some text here</h3>
  </div>
</div>