css - 用透明颜色和模糊叠加图像

Question

我有一个标题背景图片，它由 wordpress 加载到 html 中，如何用 RGBA/透明颜色覆盖它并通过 CSS 模糊其内容？

这是我的代码 https://jsfiddle.net/g0qhxjr9/

在这种情况下，您看到的 ing url 是 wordpress 特色图片功能

#header_img_over {
	height: 100%;
	overflow: hidden;
	background: rgba(28,28,34,0.9); 
  filter: blur(20px);
	z-index: 2;
}
.header_bg {
	z-index: -10;
	position: absolute;
	overflow: hidden;
	height: 245px;
	min-height: 245px;
	top: 0;
	left: 0;
	width: 100%;
}

.header_bg img{
    width: 100%; 
    margin: 0 auto;
    min-height: 300px;
}

<div id="header_img_over"><div class="header_bg"><img src="http://stylrs.com/v05/wp-content/uploads/2015/02/ML_Guildhall_TBL_0009-767x415.jpg"></div></div>

Answer 1

使用模糊滤镜:

.header_bg {
    filter: blur(20px);
    -webkit-filter: blur(20px);
}

Webkit 使用 -webkit-filter，过滤器应该适用于所有其他现代浏览器。