Question

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

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

Answer 1

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

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

Answer 2

这是一个快速的肮脏修复...但我通常只是在文本包装器中添加对比背景颜色（就像下面示例中的第一个）。如果需要，您还可以使用模糊过滤器。我在第二篇文章中提到了这篇文章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>

Answer 3

你选择了困难的方式。只需使用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 }

<div class="text">Some Text</div>

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

3 个答案: