如何使这个图像模糊与CSS

下面是已经模糊的图像我的意思是我想让其他图像模糊像那个图像。如何使这个图像模糊与CSS

下面的模糊图像，使其像下面的图片

无残影下面的图片，但要做出像上面的图像

下面是代码我试过我不知道我是否正确地做了或者我的意思是模糊需要更多的效果，我只是想让光线模糊。

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>

来源

2016-08-02 overflowstack9

可以增加值超过1px的看到的结果 –

@AhmadAlfy我的问题是图像被改变更变暗我要让光线模糊 – overflowstack9

您的图像较暗。模糊将最终平均到主宰的颜色，看起来它将接近黑色。 –

只需添加一个渐变叠加

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>

来源

2016-08-02 16:05:27

它的工作非常可观 – overflowstack9

您可以添加多个过滤器，以获得期望的结果。我会添加一个亮度过滤器，并将图像的亮度增加到200％。

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

jsFiddle link

来源

2016-08-02 16:05:39 Jason

您可以尝试再增加一个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%); 

}

来源

2016-08-02 16:05:43

如何使这个图像模糊与CSS

回答

相关问题