具有透明颜色和模糊的叠加图像

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，过滤器应该适用于所有其他现代浏览器。

Answer 2

您可以在#header_img_over 上添加 webkit 标签，因为它有助于在现代浏览器上运行。

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

编辑

如果您想同时进行模糊和颜色叠加，请查看我的DEMO

Answer 3

您已经获得了覆盖，只需将 header_bg 中的位置更改为相对。对于@karaokyo 所说的模糊，模糊过滤器会很好，看看这段代码，它是你的过滤器和覆盖YOUR CODE FIXED

这适用于大多数浏览器，但不适用于 IE 和其他一些较小的浏览器。为此，您可以设置回退以使用 progid:DXImageTransform.Microsoft.Blur，它仅适用于 IE 10 之前的 IE 10 及更高版本，您需要设置回退以使用 js。 我想说，如果您需要获得广泛的支持，只需使用 javascript 模糊功能，有一些易于使用的 jquery 插件。如果您需要更多帮助，请告诉我。 我差点忘了 feGausianBlur 可以在 IE10+ 上使用，但你需要使用 svg。因此，为了使用 svg 执行此操作，您只需创建两个 div 来控制响应 svgmenu1-container 和 svgmenu1-content 然后将 svg 放入其中并定义 viewBox 然后在 defs 中定义过滤器，其中 fecomposite 将采用几个属性您可以检查什么每个都在this page 然后只需通过过滤器将图像传递给您

<div class="svgmenu1-container">
<div class="svgmenu1-content">
<svg id="svgimage" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">
<defs>
<filter id="blurthis">
<feComposite operator="arithmetic" k1="0" k2="1" k3="0" k4="0" in="SourceGraphic" in2="SourceGraphic" result="inputTo_1"></feComposite>
<feGaussianBlur id="filter_1" stdDeviation="4" data-filterId="1">  </feGaussianBlur></filter></defs>
<image class="svgimage" x="0" y="0" width="800" height="500" xlink:href="/images/yourimage.jpg" alt="myimage" filter="url(#blurthis)"> </image>
</svg>
</div></div>