我可以仅在图像部分应用 CSS 过滤器吗？答案

【问题标题】：Can I apply CSS filters ONLY on image sections?我可以仅在图像部分应用 CSS 过滤器吗？
【发布时间】：2013-08-15 08:29:14
【问题描述】：

我有一个全屏背景图像

.bg { 
    left: 0;
    min-height: 100%; 
    min-width: 100%; 
    position: fixed; 
    top: 0; 
    z-index: -1; 
}

并且想应用 CSS 过滤器，我个人想在与我的身体相同的位置使用模糊效果

.container {
    margin: 0 auto; 
    width: 1000px;
}

这是一个例子：

我想在模糊的容器上写文字。

【问题讨论】：

取一个 div，将其放置在那里并使用 opacity 使图像模糊
@Hushme 不会真正模糊背景，只是稍微淡化颜色。
@Hushme 是的，谢谢。我已经试过了，但是你能告诉我一个文本没有（也）模糊的例子吗？
可能重复：stackoverflow.com/questions/13681857/blurring-an-image-via-css
@DevlshOne 这不是重复的。 OP 正在询问如何模糊图像的一部分。

标签： html css blur svg-filters

【解决方案1】：

http://jsfiddle.net/QvSng/6/

CSS

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(http://lorempixel.com/420/255) no-repeat center center fixed;
    background-size: cover;
}
body:before {
    left: 0;
    right: 0;
    margin-left:auto;
    margin-right:auto;
    content: "";
    position: absolute;
    height: 100%;
    width: 500px;
    background: url(http://lorempixel.com/420/255)  no-repeat center center fixed;
    background-size: cover;
    z-index: -1;
    filter: blur(5px);
    -webkit-filter: blur(5px);
}

div {
    height: 100%;
    width: 450px;
    margin: 0 auto;
}

【讨论】：

@MaximilianFuchs LOL，你需要解释一个答案。您只添加无重复中心中心固定和背景大小：覆盖；对我的回答。那是第一个两三分钟。 jsfiddle.net/QvSng/6

【解决方案2】：

要获得模糊效果，请使用filter: blur()（带有供应商前缀）。模糊仅适用于元素本身，不适用于其下方的任何内容，因此您需要在“模糊框”以及背景中引用图像，并使用background-position 控制偏移量，以便它们对齐正常。

.blur {
    background-image: url('http://placekitten.com/400/400');
    background-position: center -100px;
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
    filter: blur(10px);
}

JSFiddle Demo

【讨论】：

是的！伟大的！太感谢了！ :) 我会接受，但你能用这个吗：背景：url（“*”）不重复中心中心固定； -webkit-background-size：封面； -moz-background-size：封面； -o-background-size：封面；背景尺寸：封面；
我认为同样的概念不适用于缩放以适应屏幕的背景图像。这与我所做的类似，但我还没有让它与非固定的 bg 图像大小一起工作。
@andi：我已经尝试过了，它有效，但我认为你的效果更好；）
@MaximilianFuchs - 你能发布一个使用缩放以适应 bg 图像的小提琴吗？我想看看结果如何。我无法缩放中间列中的模糊图像以完全覆盖背景。
是的 - 你是对的。我以为我试过了；我想我在某个地方有错字。哦，好吧。

【解决方案3】：

您实际上可以为before 选择器应用模糊并继承background-image，而不是指定两次url。

这使得html结构更加明显

JSFiddle Demo

【讨论】：