使用CSS创建模糊纯色背景

Question

我需要帮助使用css：

将光泽模糊效果应用于纯色背景

<div class="container">
  <div class="overlay">
    Hello World!
  </div>
</div>

.container {
  background: blue;
  width: 100%;
  height: 300px;
}

.overlay {
  color: #FFF;
  padding: 20px;
}

JSFiddle：https://jsfiddle.net/znp73yr6/

Answer 1

您可以为颜色指定rgba以赋予其不透明度。这使背景看起来模糊。

background: rgba(0,0,255, 0.5);

https://jsfiddle.net/znp73yr6/1/

Answer 2

使用下面的代码段，使用filter: blur(5px);进行模糊效果

.container {
    position: relative;
    width: 100%;
    height: 300px;
}

.blur {
    background: blue url(http://i.stack.imgur.com/fAcHL.jpg);
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    z-index: 1;
}

.overlay {
    color: #FFF;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
}

<div class="container">
    <div class="blur"></div>
    <div class="overlay">
      Hello World!
    </div>
</div>