在整页，黑暗，模糊的背景图像上添加居中文本？

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

您需要使用屏蔽div。看看这个JSBin：http://jsbin.com/pefepuli/1/（编辑JSBin见this link）

如果您想知道如何实现屏蔽效果。这与掩码的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;
}