html - 在整页、变暗、模糊的背景图像上添加居中文本？

Question

我想创建一个主页，其背景图像填充整个页面高度。在此之上，我需要添加白色文本和其他元素。

This website是我想要实现的一个例子。

我想要的:

外观: 使用下面的 CSS，文本看起来非常模糊。

#header
{
    opacity: 0.2;
}
#header-inside
{
    opacity: 1.0;
    /* background:none repeat scroll 0% 0% #efefef; */
    color:#fff;
    text-shadow:2px 2px #000000;
}
#all {
    background:url("back.jpeg") no-repeat fixed center center;
    /*background-repeat:repeat-x;*/
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Answer 1

您需要使用 mask div。看看这个 JSBin:http://jsbin.com/pefepuli/1/ (要编辑 JSBin，请参阅 this link)

如果你想知道 mask 效果是如何实现的。这一切都与掩码的 background-color 属性有关。我们提供了一个 rgba 值，代表红绿蓝 Alpha。我们可以操纵背景颜色的 alpha 来改变它的不透明度。

HTML:

<div id="pic">
  <div id="mask">
    <div id="txt">Your text here</div>
  </div>
</div>

CSS:

body, html {
  height: 100%;
  width: 100%;
}

#mask {
  position: relative;
  height: 100%;
  background-color: rgba(0,10,20,.6);
}

#pic {
  background-image: url('http://d2z9qv80fklwtv.cloudfront.net/images/homescreens/7-n.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  background-position: center;
  height: 782px;
}

#txt {
  position: relative;
  color: #FFFFFF;
  left: 150px;
  top: 150px;
  font-size: 20px;
}