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

Question

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

在这种情况下，您看到 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，对于 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>

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

Overlay image with transparent colour and blur

css

overlay

image

colors