Question

我已经设置了一个背景模糊的页面，但是我得到了一个白色边框。我使用了这个问题的第一个答案：Is it possible to use -webkit-filter: blur(); on background-image?然而，它让我在边缘周围出现白色模糊。可以删除吗？我试过缩放但无济于事：

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

可能更适合使用text-shadow或box-shadow

像这样

-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);

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

1 个答案: