如何使用 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%);

}

如何使用 css 使此图像模糊

How to make this image blur with css

html

css

image

blur