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

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 来改变它的不透明度。

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;
}