html - 使用 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

使用下面的代码片段，使用 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>