如何使用CSS制作背景模糊渐变？

Question

是否可以让文字模糊背景图像，如附图所示？

Answer 1

实际上，CSS3和渐变背景可以得到一个非常相似的结果。我整理了一个快速n-dirty测试，其中唯一的区别是我将不同的图像作为背景（今天下载的Bing背景），并且渐变不遵循文本的流程，如photoshoped示例

我正在用尽可能少的语言做的是：

1. 将图像调整为所需尺寸（在我的情况下，我任意宽度为800px，让高度成比例）。
2. 将图像设置为具有相同尺寸的div的无重复背景图像。
3. 把另一个div放在里面，它占据了所有的高度，但只占父母宽度的60％，并添加了白色到白色到透明的渐变作为背景颜色（是的，3种颜色停止以更好地控制宽度alpha混合）。
4. 将文本放在渐变div中。

我不知道如何将背景图片上传到StackOverflow，而不是包含到其他地方的链接，所以我会让你抓住一些壁纸进行测试，如果你愿意的话。我只会包含相关的html5和css3代码：

.pic-box {
  margin-left: 50px;
  margin-top: 50px;
  width: 800px;
  height: 500px;
  background-image: url("bing-bg.jpg");
  background-repeat: no-repeat;
}
.grad {
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,0));
}
.text-box {
  width: 70%;
  padding: 2%;
  font-size: 1.1em;
}
.text-title {
  padding: 2%;
  color: red;
  font-weight: bold;
  font-size: 1.4em;
}

<div class="pic-box">
  <div class="grad">
    <h2 class="text-title">Lorem Ipsum</h2>
    <p class="text-box">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Cras interdum purus sed felis accumsan, sit amet laoreet orci
      sodales. Nunc pretium ante vitae orci ultricies, id luctus arcu
      volutpat. Nulla ornare tellus et turpis pretium ullamcorper.
      Maecenas eget nunc at erat imperdiet auctor. Nulla eros ante,
      porta vitae semper rhoncus, dapibus non ligula. Proin cursus
      convallis tortor, sed molestie erat. Nullam mauris urna, varius
      et efficitur eu, porttitor et augue. Mauris condimentum egestas
      condimentum.
    </p>
  </div>
</div>

如果您有空闲时间，您可以通过在文本上方和下方放置空div区域并尝试将渐变线旋转+/-某度度步长，来更接近原始请求中的图像。这将使渐变线从我的示例中的垂直类型倾斜，你可以实现一种“波浪” - 像这样的线......如果你想得到真正的幻想，你可以尝试在径向渐变中混合好吧，看看你需要的地方。

请注意：在我的测试中我所关心的是我可以在Chrome浏览器中看到一些东西，所以我没有采取任何措施来确保它可以在多个浏览器中运行。如果它不适合您，请查看如何为正在使用的here添加正确的CSS。