仅在选定区域（文本后面）模糊背景答案

【问题标题】：Blurring background in only a select area (behind text)仅在选定区域（文本后面）模糊背景
【发布时间】：2018-05-17 00:44:06
【问题描述】：

我正在使用 HTML/CSS/Javascript 创建主页，在此页面上，我的文本浮动在屏幕的左上角。我有一些从 Reddit 保存的背景和一个在启动时随机选择一个的脚本，我的问题是因为这个背景可以是任何颜色，所以文本很难阅读，所以我的想法是模糊背景文本以使其可读。理想情况下，它会跟随文本并模糊它的轮廓，但我尝试将它放在一个盒子里，但是，因为它使用相对布局，很难让盒子填充并模糊尽可能小的空间。

如何通过模糊文本周围的背景来提高文本的可读性？我也愿意接受其他提高可读性的建议（记住背景更改）

【问题讨论】：

这里的人可能能够回答您的问题：模糊背景，但对于设计问题，请考虑其他 Stack Exchange 网站，例如 Graphic Design。您可能会因为这个问题不适合 Stack Overflow 而受到反对。

标签： javascript html css web

【解决方案1】：

尝试使用 CSS3 过滤器：https://www.inserthtml.com/2012/06/css-filters/

上面的链接应该有关于如何模糊图像的指南，您应该能够修改它以满足您的要求。

【讨论】：

【解决方案2】：

你选择了困难的方式。只需使用 CSS text-shadow 属性。例如，如果文本是黑色的，则使用白色阴影颜色。

示例：

body {
    background-image: url('https://images.template.net/wp-content/uploads/2015/09/01191816/Perfect-Summer-Background-Free-Download.png');
    background-size: cover
}
.text {
    color: #000;
    font-size: 3em;
    text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff
}

&lt;div class="text"&gt;Some Text&lt;/div&gt;

【讨论】：

【解决方案3】：

这是一个快速而肮脏的修复...但我通常只是在文本包装器中添加对比背景颜色（如下例中的第一个）。如果需要，您也可以使用模糊滤镜。第二篇我参考了这篇文章frosting glass css filter。但在那篇文章的评论中，有人说这是性能的权衡。

#bg {
  background: url(https://picsum.photos/500/400?image=0) center center no-repeat;
  background-size: cover;
  width: 500px;
  height: 300px;
  margin-bottom: 30px;
}

#text-wrap1 {
  padding: 30px;
  background-color: rgba(255,255,255,0.7);
  text-shadow: 1px 1px 1px white;
  width: 150px;
}

#text-wrap2 {
  padding: 30px;
  width: 150px;
  position: relative;
}
#text-wrap2 p {
  position: relative;
  text-shadow: 1px 1px 1px white;
}
#text-wrap2:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: white;
  position: absolute;
  left:0;
  top:0;
  -webkit-filter: url('#blur');
  filter: url('#blur');
  -webkit-filter: blur(5px);
  filter: blur(5px);
  background-size: cover;
  opacity: 0.7;
}

<div id="container">
  <div id="bg">
    <div id="text-wrap1">
      This is a random paragraph
    </div>
  </div>

  <div id="bg">
    <div id="text-wrap2">
      <p>This is a random paragraph</p>
    </div>
  </div>
</div>

【讨论】：