CSS

Question

所以我遇到了图片边缘褪色的问题。它们在边缘褪色的原因是滤镜模糊。 （我需要模糊滤镜） 有什么建议可以让我摆脱淡入淡出，或者它是在 css 中实现模糊效果的另一种方法，还是我必须在 photoshop 中实现？

.bg-img{
 background: url("http://hdwallpaperfun.com/wp-content/uploads/2014/08/Snow-Mountain-Wallpaper-High-Definition.jpg") no-repeat center center fixed;
 background-size: cover;
 display: block;
 filter: blur(5px);
 -webkit-filter: blur(5px);
 position: fixed;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 z-index: 1;
 padding: 0;
 margin: 0
}

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="framside.css">
 </head>
 <body>
  <div class="bg-img"></div>
 </body>
</html>

Answer 1

您可以在模糊版本后面叠加一个非模糊版本：

.bg-img-solid{
 background: url("http://hdwallpaperfun.com/wp-content/uploads/2014/08/Snow-Mountain-Wallpaper-High-Definition.jpg") no-repeat center center fixed;
 background-size: cover;
 display: block;
 position: fixed;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 z-index: 1;
 padding: 0;
 margin: 0
}

.bg-img{
 background: url("http://hdwallpaperfun.com/wp-content/uploads/2014/08/Snow-Mountain-Wallpaper-High-Definition.jpg") no-repeat center center fixed;
 background-size: cover;
 display: block;
 filter: blur(5px);
 -webkit-filter: blur(5px);
 position: fixed;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 z-index: 1;
 padding: 0;
 margin: 0
}

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="framside.css">
 </head>
 <body>
  <div class="bg-img-solid"><div class="bg-img"></div></div>
 </body>
</html>

我只是复制然后从父 div 移除模糊。

Answer 2

您还可以用负 % 偏移顶部、右侧、底部、左侧。然后将偏移量作为 % 添加到宽度和高度。当然，前提是您不太关心稍微裁剪图像。

例如https://jsfiddle.net/mwzddfs6/

<div class="content"></div>

.content {
  overflow: auto;
  position: relative;
}
.content:before {
  content: "";
  position: fixed;
  left: -1%;
  right: -1%;
  top: -1%;
  bottom: -1%;
  z-index: -1;

  display: block;
  background-image: url(http://hdwallpaperfun.com/wp-content/uploads/2014/08/Snow-Mountain-Wallpaper-High-Definition.jpg);
  background-size: cover;
  width: 102%;
  height: 102%;

  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

ps：我也更喜欢使用content:before，以保持代码更简洁。个人喜好，仅此而已。

CSS - 删除背景褪色边缘

CSS - Remove background faded edges

blur