如何使这个图像模糊与CSS

Question

以下是已经模糊的图像，我的意思是我想让其他图像像那个图像一样模糊。

下方图像模糊，如下图所示

下面的图像没有模糊但想要像上面的图像一样

下面是我试过的代码我不知道我是否正确地做了我的意思是模糊对图像的影响更大我只是想让光线模糊。

img {
    filter: blur(1px);
        -webkit-filter: blur(1px);
        -moz-filter: blur(1px);
        -o-filter: blur(1px);
        -ms-filter: blur(1px);
  
}

<div><img src="http://i.imgur.com/Cdd4Es3.jpg" /></div>

Answer 1

只需添加渐变叠加

div {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
div::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, transparent 40%, rgba(255, 255, 255, .8));
}
img {
  display: block;
  filter: blur(2px);
}

<div>
  <img src="http://i.imgur.com/Cdd4Es3.jpg" />
</div>

Answer 2

您可以添加多个过滤器以获得所需的结果。我会添加一个亮度滤镜，并将图像的亮度提高到200％。

img {
  -webkit-filter: brightness(200%) blur(1px);
  filter: brightness(200%) blur(1px);
}

jsFiddle link

Answer 3

您可以尝试添加一个css过滤器来减轻img的负担;

亮度（110％）;

img {
    filter: blur(1px) brightness(110%);
        -webkit-filter: blur(1px) brightness(110%);
        -moz-filter: blur(1px) brightness(110%);
        -o-filter: blur(1px) brightness(110%);
        -ms-filter: blur(1px) brightness(110%);

}