如何模糊背景图像 - css？

Question

我试图模糊没有文字的背景 img，但文字也变得模糊。这是一个 bootstrap-ui-angular 模态。它应该很容易，但我就是无法让它工作。

css代码：

.test:before{
    content: "";
    z-index: -1;

    display: block;
    background: url("../images/3.jpg");

    -webkit-filter: blur(5px);
    filter: blur(5px);


}
.test{
    z-index: 0;
}

html代码：

<form ng-submit="ok()" class="test">
    <div class="modal-header col-lg-12">
        <h3 class="col-lg-4 col-lg-offset-4">{{selectedCard.monitorName}}</h3>
    </div>
    <div class="modal-body">
        <div class="panel-body">
            <div class="form-group">
                <label class="card-lable">kind</label>
                <p class="card-p">{{selectedCard.monitorType}}</p>
            </div>
            <div class="form-group">
                <label class="card-lable">proc</label>
                <p class="card-p">{{selectedCard.monitorProdact}}</p>
            </div>
            <div class="form-group">
                <label class="card-lable">sys</label>
                <p class="card-p">{{selectedCard.monitorSystem}}</p>
            </div>
            <div class="form-group">
                <label class="card-lable">ex</label>
                <p class="card-p">{{selectedCard.monitorExplain}}</p>
            </div>
        </div>
        <div class="modal-footer ">
            <button type="submit" class="btn btn-success col-lg-4 col-lg-offset-4">X</button>
        </div>
    </div>
</form>

Answer 1

它们应该在表单中的两个 div 中。一种用于文本，一种用于图像。两者都必须是绝对位置。您可能不得不打乱他们的订单，因为您希望带有图像的 div 位于带有文本的 div 后面。

然后仅在图像 DIV 上使用 class。

希望对您有所帮助。

Answer 2

试试这个，它来自另一个 SO post 但它在我的本地测试中有效： http://codepen.io/aniketpant/pen/DsEve

参考：How to apply a CSS 3 blur filter to a background image

试着把它放在另一个 class 你不需要它在 ':before' 为您的图片添加模糊 class 并试一试

img.blur {
  filter: blur(20px);
}

尽管检查可比性，但不确定您支持什么，但这可能是您的问题： http://caniuse.com/#feat=css-filters

也参考这个，很好的指导： https://css-tricks.com/almanac/properties/f/filter/

如何模糊背景图像 - css？

How to blur background img - css?

html

css

blur

angular-ui-bootstrap