元素未停留在div(/w图像背景)内

Question

http://codepen.io/apswak/pen/qNQxgA

我正在尝试创建一个带有背景图像的页眉。为什么我嵌套在里面的每个元素都被推到背景图像上方？有更好的方法吗？

  <div class="header">
    <h1>Lorem ipsum random stoof</h1>
    <h3>Master.</h3>
  </div>
.header {
  background-color: #222;
  background: url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/825303XHAE.jpg')50% 100px no-repeat;
  background-size: cover;
  height: 700px;
  margin-top: -50px;
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -o-filter: blur(1px);
  -ms-filter: blur(1px);
  filter: blur(1px);
}

Answer 1

两个原因：

1.(背景放置50% 100px向下推动背景图像100px。只需移除100px。。。

2.(CCD_ 2对CCD_。移除或调整它-取决于你使用它时想要什么。

http://codepen.io/anon/pen/RRqQOr

第页。S.：filter: blur(1px);将模糊.header中的所有内容，而不仅仅是背景图像(即文本(。您可能想要删除它…

Answer 2

您的CSS代码中有错误。你有margin-top:-50px;，它把所有东西都拉高了50像素。删除该行或将其更改为正值，您将看到更改！

.header {
  background-color: #222;
  background: url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/825303XHAE.jpg')50% 100px no-repeat;
  background-size: cover;
  height: 700px;
  margin-top: 10px;
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -o-filter: blur(1px);
  -ms-filter: blur(1px);
  filter: blur(1px);
}

  <div class="header">
    <h1>Lorem ipsum random stoof</h1>
    <h3>Master.</h3>
  </div>