模糊背景周围的白色模糊+保持文本不模糊

Question

我设置了一个背景模糊的页面，但我得到了一个白色边框。我使用了这个问题的第一个答案：是否可以使用-webkit filter：blur（）；在背景图像上？然而，它在边缘给了我一个白色的模糊。有可能去掉这个吗？我尝试过缩放，但没有成功：

html:before {
  content: "";
  position: absolute;
  background: url(<?php echo $image ?>);
  background-size: cover;
  z-index: -1; /* Keep the background behind the content */
  height: 20%; width: 20%; /* Using Glen Maddern's trick /via @mente */
  /* don't forget to use the prefixes you need */
  transform: scale(5);
  transform-origin: top left;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}
html {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  height: 100%;
}

Answer 1

最好使用文本阴影或框阴影

像这个

-webkit-box-shadow: 0px 0px 19px 0px rgba(0, 106, 154, 1);
-moz-box-shadow:    0px 0px 19px 0px rgba(0, 106, 154, 1);
box-shadow:         0px 0px 19px 0px rgba(0, 106, 154, 1);