`backdrop-filter`

Question

我正在尝试模糊背景图片，但主要内容也是模糊的（<span>）

如何在不模糊内容的情况下模糊背景？

Answer 1

.blur-bgimage {
    overflow: hidden;
    margin: 0;
    text-align: left;
}
.blur-bgimage:before {
    content: "";
    position: absolute;
    width : 100%;
    height: 100%;
    background: inherit;
    z-index: -1;

    filter        : blur(10px);
    -moz-filter   : blur(10px);
    -webkit-filter: blur(10px);
    -o-filter     : blur(10px);

    transition        : all 2s linear;
    -moz-transition   : all 2s linear;
    -webkit-transition: all 2s linear;
    -o-transition     : all 2s linear;
}

您可以使用body的：在伪类之前模糊身体背景图像以继承图像然后模糊它。将所有内容包装到一个类中，并使用javascript添加和删除类以模糊和解开。

Answer 2

您可以将一个元素叠加在模糊元素上方，如此

DEMO

div {
    position: absolute;
    left:0;
    top: 0;
}
p {
    position: absolute;
    left:0;
    top: 0;
}

Answer 3

将另一个div或img添加到您的主div并改为模糊。 jsfiddle

.blur {
    background:url('http://i0.kym-cdn.com/photos/images/original/000/051/726/17-i-lol.jpg?1318992465') no-repeat center;
    background-size:cover;
    -webkit-filter: blur(13px);
    -moz-filter: blur(13px);
    -o-filter: blur(13px);
    -ms-filter: blur(13px);
    filter: blur(13px);
    position:absolute;
    width:100%;
    height:100%;
}

Answer 4

jsfiddle

<div> 
    <img class="class" src="http://i0.kym-cdn.com/photos/images/original/000/051/726/17-i-lol.jpg?1318992465">
    </img>
    <span>
        Hello World!
    </span>
</div>

这个怎么样？在div上没有绝对定位，而是在img和span上。

Answer 5

您要查找的是“backdrop-filter”属性，而不仅仅是“filter”。

示例：
背景滤镜：模糊（5px）； ✔️
过滤器：模糊（5px）； ❌

Answer 6

`backdrop-filter`

不幸的是，Mozilla确实丢下了球，并花了点时间使用该功能。我个人希望它能进入下一个Firefox ESR，因为这是Waterfox的下一个主要版本所使用的。

MDN（Mozilla开发人员网络）文章：https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

Mozilla实施：https://bugzilla.mozilla.org/show_bug.cgi?id=1178765

从MDN文档页面：

/* URL to SVG filter */
backdrop-filter: url(commonfilters.svg#filter);

/* <filter-function> values */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* Multiple filters */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

CSS模糊背景图像，但不是内容

6 个答案:

`backdrop-filter`