Question

我正在尝试使用背景图片创建标题。为什么我嵌入的每个元素都被推到背景图像之上？有更好的方法吗？

  <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。）margin-top: -50px;上的.header。取下它或调整它 - 取决于你使用它时所用的。

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

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

Answer 2

您的CSS代码中有错误。你有margin-top:-50px;，它可以提升50px。删除该行或将其更改为某个正值，您将看到更改！

.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>

不留在div内的元素（/ w图像背景）

2 个答案: